/* Realm status box in the right sidebar.
   Sits on top of modules/sidebar.css. The box itself is left exactly where it
   was - only the line inside it is laid out again. */

/* modules/sidebar.css positions the two halves of the status line with floats
   and a negative margin:

       .a-realm #body #online  { float: left;  margin-left: -125px; }
       .a-realm #body #uptime  { float: right; margin-right: 6px; }

   The -125px was tuned for the old, much longer text "1368 Players Online".
   With the short "Worldserver" it drags the icon out of the box on the left.

   Rather than guessing a replacement margin, #body becomes a flex row: label
   left, uptime right, padding on the container. That way the position no
   longer depends on how long the text happens to be. */
.a-realm #body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    height: 35px;            /* box is 77px tall, #head takes 42px */
    padding: 0 15px 0 8px;   /* 8px left matches #name, 15px right matches #info */
}

/* The floats and margins from sidebar.css have to go, or they fight the flex
   layout. */
.a-realm #body #online,
.a-realm #body #uptime {
    float: none;
    margin: 0;
    padding: 0;
}

/* Icon left, label right of it, both on the same baseline. */
.realm-line {
    display: flex;
    align-items: center;
    gap: 7px;
}

.realm-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex: 0 0 16px;
}

/* Fallback while no icon file has been placed in assets/images/body. */
.realm-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 50%;
    box-shadow: 0 0 6px currentColor;
}

.realm-dot-up   { background: #5aa73c; color: #5aa73c; }
.realm-dot-down { background: #a73c3c; color: #a73c3c; }

/* =========================================================================
   Community artwork box (right sidebar, where "Private Status" used to be)

   modules/sidebar.css line 7 gives .stat_count_show a fixed 297x190. The image
   therefore has to fill exactly that - no more, no less - which is what
   object-fit: cover does: it scales the image until it covers the box and
   crops whatever sticks out, without ever distorting it.
   ========================================================================= */

.stat_count_show {
    /* The box paints its own frame; the image must not spill over it. */
    overflow: hidden;
    position: relative;
}

.stat_count_show .artwork-box {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 3px;
}

/* Fills the box completely, keeps its aspect ratio, crops the overflow. */
.artwork-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Shown until an image has been uploaded in the admin panel. */
.artwork-placeholder {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: rgba(20, 14, 9, .35);
    border: 1px dashed rgba(120, 90, 55, .40);
    border-radius: 3px;
}

/* Caption sits flush on the bottom edge of the box, centred.
   Same colour and font as the media page titles: #ffb100, Arial 13px. */
.artwork-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px 10px 8px;
    text-align: center;
    font: normal 13px/1.4 Arial, Verdana, sans-serif;
    color: #ffb100;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 8px rgba(0, 0, 0, .8);
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .8));
}

/* The artwork boxes are links now, so they must not pick up the default link
   colour, and the caption should react on hover. */
.stat_count_show a.artwork-box {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.stat_count_show a.artwork-box:hover .artwork-caption { color: #fff !important; }

/* Video background: fills the window, sits behind everything, never scrolls
   with the page. object-fit: cover crops rather than distorts. */
#body-video {
    position: fixed;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* =========================================================================
   Per-area maintenance

   Sits inside whatever content container the page uses, so it carries its own
   spacing and does not rely on a particular page layout.
   ========================================================================= */

.area-maintenance {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 420px;      /* keeps the content area from collapsing */
    padding: 40px 24px 50px;
    text-align: center;
}

.area-maintenance h2 {
    margin: 0 0 10px;
    font-size: 32px;
    font-weight: normal;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #F0E29A;
}

.area-maintenance p {
    margin: 0 0 30px;
    max-width: 520px;
    font-size: 15px;
    line-height: 1.6;
    color: #a99877;
}

/* Below the text, centred. max-width keeps a large file from filling the
   whole page; height: auto preserves its proportions. */
.area-maintenance-image {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 320px;
}

/* Only staff see this: a reminder that visitors are still locked out. */
.area-maintenance-hint {
    margin: 0 0 18px;
    padding: 9px 13px;
    background: rgba(150, 80, 25, .18);
    border-left: 3px solid #c8a256;
    border-radius: 3px;
    font-size: 12px;
    color: #e2d7c0;
}