/* Halloween 2026 look of inf.php (App\GameEvent\Release\Halloween2026::INF_THEME, owner 2026-10-30): corners of the
   frame, dark header, the knight behind the character, orange info sign. inf.php loads it after the alignment
   backgrounds and before the player's own styles: the selectors are the same, the order decides.
   Pictures - img/inf/halloween-2026/, from temporary-data/halloween/30-10-26/ (knight.png, halloween-frame-transfer). */

/* [1] BACKGROUND - instead of the alignment backgrounds, a third wider than they are (part of it under the info blocks).
   By the alignment class of inf.php (owner 2026-10-30, pictures of the alignments - dark/ of 30-10-26): dark - the horned
   skull, neutral and moderators - the scales, light - the angel mask; chaos and no alignment - the knight */
body { background: url(/img/inf/halloween-2026/knight.webp) no-repeat top right #e2e0e0; }
body.inf-align-dark { background-image: url(/img/inf/halloween-2026/align-dark.webp); }
body.inf-align-neutral,
body.inf-align-moder { background-image: url(/img/inf/halloween-2026/align-neutral.webp); }
body.inf-align-light { background-image: url(/img/inf/halloween-2026/align-light.webp); }

/* [2] CORNERS - over the page, clicks pass through */
body::before,
body::after {
    content: "";
    position: absolute;
    top: 0;
    z-index: 6;
    width: 230px;
    height: 280px;
    background: no-repeat 0 0 / 100% 100%;
    pointer-events: none;
}
body::before { left: 0; background-image: url(/img/inf/halloween-2026/corner-left.webp); }
body::after { right: 0; background-image: url(/img/inf/halloween-2026/corner-right.webp); }

/* [2a] FIRE OF THE CORNERS - the pumpkin and two lanterns of each corner breathe, slightly and out of step: every light its
   own period and phase (owner 2026-10-30). A soft spot over the fire, screen-blended with the corner below; the block has
   no z-index - the spots blend with the page, not inside it. Places - the bright spots of corner-left/right.png (230x280) */
.inf-theme-glow { position: absolute; top: 0; left: 0; right: 0; height: 280px; pointer-events: none; }
.inf-theme-glow span {
    position: absolute;
    z-index: 7;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 200, 110, 0.85) 0%, rgba(255, 140, 30, 0.4) 40%, rgba(255, 120, 0, 0) 70%);
    mix-blend-mode: screen;
    opacity: 0.15;
    animation: inf-glow 5.3s ease-in-out infinite;
}
/* left: pumpkin, lower lantern, upper lantern; right: the same */
.inf-theme-glow span:nth-child(1) { left: 32px; top: 49px; width: 46px; height: 46px; animation-duration: 6.7s; animation-delay: -1.3s; }
.inf-theme-glow span:nth-child(2) { left: 59px; top: 142px; width: 26px; height: 26px; animation-duration: 4.3s; animation-delay: -2.9s; }
.inf-theme-glow span:nth-child(3) { left: 130px; top: 78px; width: 22px; height: 22px; animation-duration: 5.9s; animation-delay: -0.4s; }
.inf-theme-glow span:nth-child(4) { right: 31px; top: 49px; width: 46px; height: 46px; animation-duration: 7.9s; animation-delay: -4.1s; }
.inf-theme-glow span:nth-child(5) { right: 61px; top: 142px; width: 26px; height: 26px; animation-duration: 5.3s; animation-delay: -1.7s; }
.inf-theme-glow span:nth-child(6) { right: 133px; top: 79px; width: 22px; height: 22px; animation-duration: 7.1s; animation-delay: -3.3s; }

/* Uneven: slow swell, a short shiver, a dip - not a regular pulse */
@keyframes inf-glow {
    0%, 100% { opacity: 0.15; }
    22% { opacity: 0.55; }
    27% { opacity: 0.35; }
    31% { opacity: 0.6; }
    52% { opacity: 0.25; }
    71% { opacity: 0.5; }
    86% { opacity: 0.1; }
}

@media (prefers-reduced-motion: reduce) {
    .inf-theme-glow { display: none; }
}

/* [3] HEADER - dark, more transparent to the right as in the mock-up (owner 2026-10-30: 0.75), room for the corners
   above. The bar runs under the corners, its text moves out of them on .inner: the player's own styles set the margins
   of #topHeader, not of .inner */
#topHeader { margin-top: 70px; background: linear-gradient(to right, rgba(24, 24, 24, 0.75), rgba(24, 24, 24, 0.35)); }
#topHeader .inner { padding: 0 150px 0 170px; }
#topHeader .inner .inf { left: 145px; background-color: #e86e00; color: #1e1e1e; }
#topHeader .inner .inf:hover { background-color: #f57e00; }
#topHeader h1 { color: #f2f2f2; }
#topHeader h1 a { color: #f2f2f2; }

/* Content off the side edges: the lower parts of the corners hang beside it, not over the items of the character */
.main-content { padding-left: 64px; padding-right: 64px; }

/* [4] BLOCK HEADERS - dark as the header, light titles; orange only on the chosen tab of the gifts / collections block
   (owner 2026-10-30: orange titles everywhere were too much) */
.data h3 { background: linear-gradient(to right, rgba(24, 24, 24, 0.75), rgba(24, 24, 24, 0.35)); color: #f2f2f2; border-bottom-color: rgba(0, 0, 0, 0.3); }
.data h3 .item:hover { color: #fff; }
.data h3 .item.achieve { color: rgba(242, 242, 242, 0.5); border-left-color: #8a8a8a; }
.data h3 .cl-tab + .cl-tab { border-left-color: #8a8a8a; }
.data h3 .cl-tab.is-active { color: #e86e00; }
.data h3 .cl-tab:not(.is-active) { color: rgba(242, 242, 242, 0.6); }
.data h3 .cl-tab:not(.is-active):hover,
.data h3 .cl-tab:not(.is-active):focus-visible { color: #fff; }

/* Moderator links (inf.php .mod-block): dark as the headers - grey links on the light glass were lost on the dark picture */
.mod-block { border-color: rgba(0, 0, 0, 0.4); background: linear-gradient(to right, rgba(24, 24, 24, 0.75), rgba(24, 24, 24, 0.55)); }
.mod-block ul li a { color: #f2f2f2; }
.mod-block ul li a:hover { color: #f57e00; }

/* [5] PHONE */
@media (max-width: 600px) {
    /* Centered on a phone (owner 2026-10-30): pinned to the right, the picture showed only its left part */
    body { background: url(/img/inf/halloween-2026/knight-sm.webp) no-repeat top center #e2e0e0; }
    body.inf-align-dark { background-image: url(/img/inf/halloween-2026/align-dark-sm.webp); }
    body.inf-align-neutral,
    body.inf-align-moder { background-image: url(/img/inf/halloween-2026/align-neutral-sm.webp); }
    body.inf-align-light { background-image: url(/img/inf/halloween-2026/align-light-sm.webp); }
    body::before,
    body::after { width: 95px; height: 145px; }
    body::before { background-image: url(/img/inf/halloween-2026/corner-left-sm.webp); }
    body::after { background-image: url(/img/inf/halloween-2026/corner-right-sm.webp); }
    #topHeader { margin-top: 32px; }
    /* Fire of the small corners (95x145): the pumpkin and the lower lantern, the upper one is too small */
    .inf-theme-glow { height: 145px; }
    .inf-theme-glow span:nth-child(1) { left: 16px; top: 23px; width: 20px; height: 20px; }
    .inf-theme-glow span:nth-child(2) { left: 27px; top: 66px; width: 12px; height: 12px; }
    .inf-theme-glow span:nth-child(4) { right: 17px; top: 24px; width: 20px; height: 20px; }
    .inf-theme-glow span:nth-child(5) { right: 29px; top: 66px; width: 12px; height: 12px; }
    .inf-theme-glow span:nth-child(3),
    .inf-theme-glow span:nth-child(6) { display: none; }
    /* The centered picture lies under the character: the text under the doll gets a light backing */
    .pers-location { padding: 2px 0 4px; border-radius: 3px; background-color: rgba(226, 224, 224, 0.8); }
    #topHeader .inner { padding: 0 70px; }
    #topHeader .inner .inf { left: 52px; }
    .main-content { padding-left: 20px; padding-right: 20px; }
}