/* The Wilderness: its level beside the minimap (the inventory owns the space
   beneath it), the warning on crossing in, skulls overhead and the blood-red
   label of a player you may fight. */
.wilderness-level { position: absolute; top: 40px; right: calc(100% + 4px); display: flex; align-items: center; gap: 9px; width: max-content; box-sizing: border-box; padding: 6px 13px 6px 8px; text-align: left; color: #f3e0c6; font: 11px Georgia, serif; text-shadow: 0 1px 3px #140a08; background: linear-gradient(135deg, #43221dee, #261613ee); border: 1px solid #b4634b8c; box-shadow: 0 4px 14px #1c0f0b4d, inset 0 0 0 2px #f2a27a0c; pointer-events: auto; }
.wilderness-level[hidden], .wilderness-warning[hidden], .self-skull[hidden], .wilderness-level small[hidden] { display: none; }
.wilderness-level .wilderness-skull { width: 26px; height: 26px; flex: none; filter: drop-shadow(0 1px 2px #0007); }
.wilderness-level strong { display: block; font-weight: 400; letter-spacing: .5px; white-space: nowrap; }
.wilderness-level strong b { color: #ffb36e; font-weight: 700; }
.wilderness-level small { display: block; margin-top: 2px; font: 9px ui-sans-serif, sans-serif; letter-spacing: .8px; color: #dcb9a0; white-space: nowrap; }
.wilderness-level .wilderness-skull-time { color: #ff9677; }
.wilderness-level .wilderness-multi { display: flex; align-items: center; gap: 4px; color: #ffcf8a; }
.wilderness-level .wilderness-swords { width: 13px; height: 13px; flex: none; filter: drop-shadow(0 1px 1px #0008); }
.wilderness-level.is-multi { border-color: #e0915f99; }
/* In the region banner's place, above the traveller; it outranks that banner. */
#hud:has(.wilderness-warning:not([hidden])) .region-reveal { visibility: hidden; }
.wilderness-warning { position: absolute; top: calc(23% + 12px); left: 50%; z-index: 9; width: min(430px, calc(100vw - 32px)); box-sizing: border-box; padding: 16px 26px 15px; text-align: center; pointer-events: none; color: #f7e5ca; text-shadow: 0 2px 6px #140806; background: linear-gradient(160deg, #431f19f0, #21130ff0); border: 1px solid #c56b508c; box-shadow: 0 14px 40px #12080650, inset 0 0 0 3px #f3a27b0e; animation: wilderness-warning 7s ease both; }
.wilderness-warning .wilderness-skull { display: block; width: 38px; height: 38px; margin: -36px auto 8px; filter: drop-shadow(0 3px 5px #0009); }
.wilderness-warning small { font: 9px ui-sans-serif, sans-serif; letter-spacing: 3px; color: #e6a682; }
.wilderness-warning h2 { margin: 6px 0 8px; font: 400 25px Greenvale Serif, Georgia, serif; letter-spacing: 1px; }
.wilderness-warning p { margin: 0; font: italic 13px Georgia, serif; color: #f1d0b6; }
@keyframes wilderness-warning { 0% { opacity: 0; transform: translate(-50%, 10px); } 7%, 84% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 0); } }
.self-skull { position: absolute; transform: translate(-50%, -100%); pointer-events: none; }
.self-skull .wilderness-skull, .remote-player-label .remote-skull { display: block; width: 22px; height: 22px; filter: drop-shadow(0 2px 3px #000a); }
.remote-player-label .remote-skull { align-self: center; margin: -1px 0 1px; }
.remote-player-label.is-attackable { background: #44221ee6; border-color: #d66d4fcc; box-shadow: 0 0 0 1px #d66d4f30, 0 3px 10px #0005; }
.remote-player-label.is-attackable strong { color: #ffad80; }
#hud.is-defeated .wilderness-warning, .in-combat .wilderness-warning { visibility: hidden; }
@media (max-width: 820px) { .wilderness-level { top: 26px; padding: 5px 9px 5px 6px; gap: 6px; } .wilderness-level .wilderness-skull { width: 20px; height: 20px; } .wilderness-warning { padding: 12px 18px 12px; } .wilderness-warning h2 { font-size: 20px; } }