.map-viewport{width:100vw;height:100vh;overflow:hidden;background:#000;cursor:grab;touch-action:none}.map-viewport:active{cursor:grabbing}.map-layer{-webkit-user-select:none;user-select:none}html,body{margin:0;padding:0;overflow:hidden}.map-marker{position:absolute;transform:translate(-50%,-100%);padding:4px 8px;font-size:12px;white-space:nowrap;cursor:pointer;background:#141414d9;color:#fff;border:1px solid #aaa;border-radius:4px;pointer-events:auto;display:flex;flex-direction:column;align-items:center}.map-marker-icon{image-rendering:pixelated;cursor:pointer}.map-marker:hover{background:#3c3c3cf2}.map-marker-label{margin-top:2px;padding:2px 6px;font-size:11px;white-space:nowrap;background:#000000bf;color:#fff;border-radius:3px;pointer-events:none}.area-panel{position:fixed;top:0;right:0;width:350px;height:100vh;background:#111;color:#fff;overflow-y:auto;z-index:1000}.area-panel-header{position:sticky;top:0;z-index:2;display:flex;align-items:center;padding-left:16px;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:2.2rem;background-color:#111;border-left:4px solid var(--region-color);gap:20px}.area-panel-stats{position:absolute;bottom:0;left:0;width:100%;display:flex;justify-content:space-around;align-items:center;font-size:.85rem;padding:.3rem 0}.area-panel-title{position:relative;z-index:2;margin:0}.area-panel-close{position:absolute;top:8px;right:8px;z-index:3;background:none;border:none;color:#fff;font-size:18px;cursor:pointer}.area-panel-close:hover{color:#f55}.character-name{font-weight:700;font-size:16px;line-height:1.2;min-height:2.4em;max-height:2.4em;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical}.character-card{display:flex;gap:12px;margin-bottom:16px;align-items:flex-start}.empty{opacity:.6;font-style:italic}.portrait-nav{position:absolute;bottom:-10px;display:flex;gap:8px;align-items:center}.portrait-nav button{background:#ffffff1a;border:none;color:#fff;padding:4px 8px;cursor:pointer}.portrait-nav button:disabled{opacity:.3;cursor:default}.condition-step{margin-top:6px;font-size:14px;line-height:1.4;min-height:2.8em}.condition-nav{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:6px}.condition-nav button{margin-top:auto;background:none;border:1px solid rgba(255,255,255,.3);color:#fff;padding:2px 6px;cursor:pointer}.condition-nav button:disabled{opacity:.3;cursor:default}.condition-box{min-height:11.8em;background:#ffffff0d;border-radius:5%;display:flex;align-items:flex-start;width:110px}.left-sidebar{position:fixed;top:0;left:0;height:100vh;width:260px;background:#0a0a0af2;z-index:900;transition:transform .25s ease}.left-sidebar.open{transform:translate(0)}.left-sidebar.closed{transform:translate(-260px)}.sidebar-toggle{position:fixed;top:0;left:0;width:32px;height:32px;border:none;border-radius:6px;background:#141414e6;color:#fff;font-size:18px;cursor:pointer;z-index:1000;transition:transform .25s ease}.sidebar-toggle:hover{background:#282828f2}.sidebar-toggle.open{transform:translate(260px) rotate(180deg)}.sidebar-toggle.close{transform:translate(0) rotate(180deg)}.sidebar-buttons{padding:12px;border-bottom:1px solid rgba(255,255,255,.1)}.sidebar-button{width:100%;background:none;border:1px solid rgba(255,255,255,.3);color:#fff;padding:8px;cursor:pointer;opacity:1;transition:opacity .2s ease}.sidebar-button.active{border-color:#fff}.left-sidebar.visible .sidebar-button{opacity:1}.overlay-backdrop{position:fixed;inset:0;background:#000000b3;z-index:1200;display:flex;align-items:center;justify-content:center;overflow:auto;padding:20px}.subordinates-overlay{position:relative;transform:scale(min(95vw / 1350,95vh / 850));transform-origin:center;width:1350px;height:850px;aspect-ratio:1350 / 850;background:#111;padding:24px;color:#fff;display:flex;flex-direction:column}.overlay-close{position:absolute;top:12px;right:12px;background:none;border:none;color:#fff;font-size:20px;cursor:pointer}.overlay-close:hover{color:#f55}.subordinates-grid{margin-top:16px;flex:1;display:grid;grid-template-columns:repeat(auto-fill,192px);gap:16px;overflow-y:auto;justify-content:center}.subordinate-portrait{width:192px;height:256px;object-fit:contain;cursor:pointer}.character-detail-layout{display:flex;flex-direction:column;gap:16px;height:100%}.character-header{display:grid;grid-template-columns:1fr .5fr .5fr;gap:16px;padding-top:30px}.character-detail-name,.character-troop-name{padding:6px 10px}.character-main{display:grid;grid-template-columns:192px 409px 1fr 1fr;gap:16px}.character-bottom{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;flex:1}.character-portrait{position:relative;padding:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}.character-portrait img{align-items:flex-start;width:192px;height:256px;object-fit:contain}.character-stats{min-height:256px;padding:8px;background:#ffffff0d;border-radius:12px;display:grid;grid-template-columns:1fr 1fr;column-gap:16px;row-gap:6px}.character-stats .wide{grid-column:span 2}.character-troop-stats{min-height:256px;padding:8px;background:#ffffff0d;border-radius:5%}.character-troop-sprites{position:relative;background:#ffffff0d;border-radius:12px;display:flex;align-items:center;justify-content:center}.character-troop-sprites img{object-fit:contain}.character-recruitment{background:#ffffff0d;padding:12px;border-radius:12px;display:flex;flex-direction:column}.character-recruitment h2{margin:0 0 8px}.character-detail-condition-box{min-height:11.8em;border-radius:5%;display:flex}.character-condition-step{margin-top:6px;min-height:2.8em;font-size:larger}.character-condition-step div{margin-bottom:6px;line-height:1.4}.character-sprite{position:relative;padding:8px;display:flex;align-items:center;justify-content:center}.character-troop-sprites img,.character-portrait img{image-rendering:pixelated}.character-portrait,.character-sprite{width:100%;height:100%}.character-portrait img,.character-sprite img{width:100%;height:auto;max-height:256px;object-fit:contain}.sprite-nav{position:absolute;bottom:4px;display:flex;gap:8px;align-items:center}.sprite-nav button{background:#ffffff1a;border:none;color:#fff;padding:4px 8px;cursor:pointer}.sprite-nav button:disabled{opacity:.3;cursor:default}.character-link{color:#6fa8ff;cursor:pointer;text-decoration:underline}.character-link:hover{color:#9cc0ff}.item-sprite{width:409px;height:256px;object-fit:contain;cursor:pointer}.item-grid{margin-top:16px;flex:1;display:grid;grid-template-columns:repeat(auto-fill,409px);gap:16px;overflow-y:auto;justify-content:center}.character-tabs{display:inline-flex;border:1px solid #aaa;border-radius:4px;overflow:hidden;margin:0 auto 12px;background:#f0f0f0;border:1px solid #999}.tab-btn{background:#333;text-transform:capitalize;border:none;padding:6px 18px;font-family:inherit;font-size:14px;cursor:pointer;color:#ededed;transition:all .2s ease}.tab-btn:not(:last-child){border-right:1px solid #aaa}.tab-btn:hover{background:#444}.tab-btn.active{background:#1b1b1b;color:#fff;border-bottom:2px solid #c4bbbb;font-weight:700;box-shadow:inset 0 -2px #000}.tab-btn.disabled{background:#2a2a2a;color:#777;cursor:not-allowed;opacity:.6}.tab-btn.disabled:hover{background:#2a2a2a}.item-overlay{position:relative;width:850px;height:800px;background:#111;padding:24px;color:#fff;display:flex;flex-direction:column}.item-header{padding-top:30px}.item-main{display:grid;grid-template-columns:409px 1fr;gap:16px}.item-effect{font-size:larger;min-height:256px;padding:8px;background:#ffffff0d;border-radius:12px}.item-bottom{margin-top:16px;flex:1}.variant-nav{display:inline-flex;align-items:center;gap:8px;margin-top:4px}.variant-nav button{background:#ffffff1a;border:none;color:#fff;padding:2px 6px;cursor:pointer}.variant-nav button:hover{background:#fff3}.variant-nav button:disabled{opacity:.3;cursor:default}.map-wrapper{position:relative;width:100%;height:100%}.map-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#111;color:#fff;font-size:1.5rem;z-index:2}.map-content{width:100%;height:100%;object-fit:contain}.map-content.hidden{opacity:0}.map-content.visible{opacity:1;transition:opacity .3s ease}.item-sprite{position:relative;padding:8px;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.item-sprite img{width:100%;height:auto;max-height:256px;object-fit:contain}.portrait-wrapper{position:relative;display:inline-block}.subordinate-portrait.censored{position:absolute;top:0;left:0;filter:blur(12px);-webkit-mask-image:linear-gradient(to bottom,black 0%,black calc(100% - 30px),transparent calc(100% - 30px),transparent 100%);mask-image:linear-gradient(to bottom,black 0%,black calc(100% - 30px),transparent calc(100% - 30px),transparent 100%)}.filters-panel{margin-top:10px;padding:10px;border-radius:6px}.filters-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.filter-group{display:flex;align-items:center;gap:8px}.filter-group label{font-weight:500}.character-search{margin-bottom:10px;display:flex;justify-content:center}.character-search input{background:#333;width:300px;padding:6px 10px;font-size:14px;color:#ededed}.character-search input::placeholder{color:#c5c3c3}.region-section{margin-top:14px}.region-header{text-align:center;color:#fff;font-size:14px;margin-bottom:6px}.region-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.region-button{background:#333;border:1px solid #444;padding:0;cursor:pointer;overflow:hidden}.region-button img{width:100%;height:100%;object-fit:cover;display:block}.region-button.disabled img{filter:grayscale(100%)}.region-button:hover{transform:scale(1.08);filter:brightness(1.15);border-color:#888;z-index:1}