/* Full-screen world map layer + overlay controls. */
body.map-full { overflow: hidden; }
body.map-full .rankbar, body.map-full main > h1 { display: none; }
body.map-full .layout { padding-top: 0; }
body.map-full main { padding: 0; max-width: none; margin: 0; }
.worldmap { position: fixed; inset: 0; z-index: 5; background: #1d86d8; touch-action: none; }
.worldmap canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.worldmap .mp-err { position: absolute; left: 50%; top: 40%; transform: translateX(-50%); background: rgba(10,18,60,.9); color: #ffb0a0; padding: .8rem 1.2rem; border-radius: 12px; border: 3px solid #ff5a3c; font-weight: 700; }

.mp-tools { position: absolute; left: 10px; top: calc(var(--hudh, 56px) + 14px + env(safe-area-inset-top)); display: flex; flex-direction: column; gap: 8px; z-index: 6; }
.mp-b { width: 46px; height: 46px; border-radius: 50%; cursor: pointer; border: 3px solid #0a1236; font-family: var(--serif); font-size: 1.3rem; font-weight: 800; color: #fff; background: radial-gradient(circle at 35% 30%, #6aa2ff, #1f46b0 75%); box-shadow: 0 0 0 2px #ffd34d, 0 4px 0 rgba(0,0,0,.5); text-shadow: 0 2px 0 rgba(0,0,0,.5); transition: transform .12s; }
.mp-b:active { transform: scale(.9); }
.mp-events { position: absolute; right: 10px; top: calc(var(--hudh, 56px) + 14px + env(safe-area-inset-top)); display: flex; flex-direction: column; gap: 10px; align-items: center; z-index: 6; }
.mp-ev { display: flex; flex-direction: column; align-items: center; text-decoration: none; gap: 2px; }
.mp-ev .ic { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 1.5rem; font-weight: 800; color: #fff; border: 3px solid #0a1236; background: radial-gradient(circle at 35% 30%, #b58cff, #5b2fb8 75%); box-shadow: 0 0 0 2px #ffd34d, 0 4px 0 rgba(0,0,0,.5); }
.mp-ev.live .ic { background: radial-gradient(circle at 35% 30%, #ff8a63, #d1321b 75%); animation: breathe 2.2s ease-in-out infinite; }
.mp-ev .cd { font-size: .62rem; padding: 0 .4rem; border-radius: 8px; background: rgba(10,18,60,.9); color: #ffd34d; border: 1px solid #6fa0ff; }

.mp-quest { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--dock, 96px) + 24px + env(safe-area-inset-bottom)); z-index: 6; display: flex; align-items: center; gap: .6rem; padding: .35rem .9rem .35rem .4rem; max-width: calc(100vw - 150px); text-decoration: none; color: #fff; font-weight: 800; font-size: .85rem;
  background: linear-gradient(rgba(25,55,140,.95), rgba(10,24,80,.96)); border: 3px solid #0a1236; border-radius: 99px; box-shadow: 0 0 0 2px #ffd34d, 0 5px 0 rgba(0,0,0,.5); }
.mp-quest .qk { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #ffd34d; color: #2a1200; font-family: var(--serif); } .mp-quest .qt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mp-quest .qg { color: #ffd34d; }

.mp-sheet { position: absolute; left: 12px; right: 12px; bottom: calc(var(--dock, 96px) + 74px + env(safe-area-inset-bottom)); max-width: 520px; margin: 0 auto; z-index: 7; display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; color: #fff;
  background: linear-gradient(rgba(35,70,160,.97), rgba(12,26,90,.98)); border: 3px solid #0a1236; border-radius: 18px 24px 18px 22px; box-shadow: 0 0 0 2px #6fa0ff, 0 8px 0 rgba(0,0,0,.5); animation: sheetUp .22s both; }
.mp-sheet .mp-t { display: block; font-family: var(--serif); font-size: 1.05rem; } .mp-sheet small { display: block; color: #b6c6f2; font-weight: 600; }
.mp-x { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #0a1236; background: rgba(0,0,0,.35); color: #fff; font-size: 1.2rem; cursor: pointer; flex: 0 0 auto; }

.mp-panel { position: absolute; left: 66px; top: calc(var(--hudh, 56px) + 14px + env(safe-area-inset-top)); width: min(320px, calc(100vw - 150px)); max-height: 50vh; overflow: auto; z-index: 7; color: #fff;
  background: linear-gradient(rgba(25,55,140,.96), rgba(10,24,80,.97)); border: 3px solid #0a1236; border-radius: 16px 20px 16px 18px; box-shadow: 0 0 0 2px #6fa0ff, 0 6px 0 rgba(0,0,0,.5); animation: pop .25s both; }
.mp-ph { display: flex; justify-content: space-between; align-items: center; padding: .5rem .7rem; border-bottom: 1px solid rgba(160,190,255,.3); }
.mp-row { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-bottom: 1px solid rgba(160,190,255,.2); } .mp-row small { display: block; color: #b6c6f2; font-size: .7rem; } .mp-row b { font-size: .85rem; }
.mp-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #ffd34d, #e0861a); color: #2a1200; font-family: var(--serif); font-weight: 800; border: 2px solid #0a1236; flex: 0 0 auto; }
.mp-recall { border: 2px solid #0a1236; background: linear-gradient(#ff6a47, #c8321b); color: #fff; border-radius: 8px; font-weight: 800; padding: .3rem .6rem; cursor: pointer; font-size: .75rem; min-height: 34px; }

/* territory battle: capture progress + banner */
.mp-battles { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--hudh, 56px) + 12px + env(safe-area-inset-top)); z-index: 6; display: flex; flex-direction: column; gap: 6px; width: min(340px, calc(100vw - 150px)); }
.mp-bt { color: #fff; padding: .4rem .7rem; border: 3px solid #0a1236; border-radius: 14px 18px 14px 16px; background: linear-gradient(rgba(150,30,20,.95), rgba(80,10,10,.96)); box-shadow: 0 0 0 2px #ffd34d, 0 4px 0 rgba(0,0,0,.5); font-weight: 800; font-size: .8rem; }
.mp-bt .bar { height: 14px; margin-top: 4px; } .mp-bt .bar i { background: linear-gradient(90deg, #ffd34d, #ff5a3c); }
.mp-banner { position: absolute; left: 0; right: 0; top: 34%; z-index: 9; text-align: center; pointer-events: none; animation: rise .5s both; }
.mp-banner span { display: inline-block; padding: .5rem 2.4rem; font-family: var(--serif); font-weight: 800; font-size: 2.2rem; color: #fff; text-shadow: 0 3px 0 #5c150f; background: linear-gradient(#ee5a3d, #a93329); border: 3px solid #0a1236; box-shadow: 0 0 0 3px #ffd34d, 0 8px 0 rgba(0,0,0,.5), 0 0 40px rgba(255,200,80,.8); clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%); }
@media (max-height: 520px) { .mp-b { width: 38px; height: 38px; font-size: 1rem; } .mp-ev .ic { width: 40px; height: 40px; } .mp-quest { display: none; } .mp-sheet { bottom: 64px; } }