* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    background: #000;
}

.hof-body {
    overflow-x: hidden;
    font-family: "Times New Roman", Times, serif;
    color: #d8c09a;
}

.hof-page {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: #000;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
}

/* .hof-page::before { */
    /* content: ""; */
    /* position: fixed; */
    /* inset: 0; */
    /* background: */
        /* linear-gradient(90deg, rgba(0,0,0,.92), rgba(0,0,0,.25), rgba(0,0,0,.92)), */
        /* url("https://forum.l2pwner.com/img/hall01.jpg") center top / cover no-repeat; */
    /* filter: blur(10px) brightness(.55); */
    /* transform: scale(1.04); */
    /* z-index: 0; */
/* } */

.hof-stage {
    position: relative;
    z-index: 1;

	width: min(100%, 1920px);
	min-width: 960px;
	aspect-ratio: 1328 / 1152;

	container-type: inline-size;
	font-size: clamp(8px, 0.833333cqw, 16px);

    background-image:
		linear-gradient(90deg,
			rgba(0,0,0,.96) 0%,
			rgba(0,0,0,.60) 7%,
			rgba(0,0,0,.18) 16%,
			rgba(0,0,0,0) 24%,
			rgba(0,0,0,0) 76%,
			rgba(0,0,0,.18) 84%,
			rgba(0,0,0,.60) 93%,
			rgba(0,0,0,.96) 100%
		),
		url("https://forum.l2pwner.com/img/hall01.jpg");

    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;

    overflow: hidden;
}

.hof-back {
    position: fixed;
    top: 14px;
    right: 18px;
    z-index: 50;

    padding: 7px 14px;
    border: 1px solid rgba(255, 205, 130, .35);
    border-radius: 6px;

    background: rgba(5, 10, 18, .72);
    color: #f0d3a2;
    text-decoration: none;
    font-size: 15px;

    box-shadow:
        inset 0 0 8px rgba(255, 180, 80, .08),
        0 0 12px rgba(0, 160, 255, .14);

    transition: .18s ease;
}

.hof-back:hover {
    color: #fff2c8;
    border-color: rgba(255, 215, 150, .55);
    filter: brightness(1.12);
}

.hof-back:active {
    transform: translateY(1px) scale(.98);
    filter: brightness(.92);
}

.hof-header {
    position: absolute;
    top: 9.6%;
    left: 25%;
    width: 50%;
    text-align: center;
    pointer-events: auto;
}

.hof-logo {
    display: block;
    margin-bottom: 1.7%;

    color: rgba(180, 245, 255, .95);
    font-size: clamp(10px, .82vw, 15px);
    letter-spacing: 2.4px;
    text-transform: uppercase;

    text-shadow:
        0 0 6px rgba(130, 235, 255, .95),
        0 0 16px rgba(30, 160, 255, .72),
        0 2px 5px rgba(0,0,0,1);
}

.hof-header h1 {
    display: inline-block;
    color: #ffe6b6;
    font-size: clamp(24px, 2.25vw, 42px);
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
    line-height: 1;
    cursor: default;

    text-shadow:
        0 0 4px rgba(255, 245, 205, .95),
        0 0 12px rgba(255, 190, 90, .78),
        0 0 26px rgba(255, 90, 20, .45),
        0 3px 8px rgba(0,0,0,1);

    transform-origin: center center;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;

    transition:
        transform .28s cubic-bezier(.22, .61, .36, 1),
        text-shadow .28s ease;
}

.hof-header h1:hover {
    transform: translate3d(0, 0, 0) scale(1.01);
}

.hof-subtitle {
    margin-top: 1.35%;
    color: rgba(235, 222, 205, .86);
    font-size: clamp(10px, .78vw, 14px);
    line-height: 1.25;
    font-style: italic;
    letter-spacing: .35px;

    text-shadow:
        0 0 4px rgba(255, 230, 170, .28),
        0 2px 5px rgba(0,0,0,1);
}

.hof-subtitle span {
    display: block;
}

.hof-subtitle span + span {
    margin-top: .28em;
}

.hof-title {
    position: absolute;
    top: 31.2%;
    width: 20%;

    text-align: center;
    text-transform: uppercase;

    font-size: clamp(17px, 1.10vw, 27px);
    letter-spacing: 3.2px;
    line-height: 1;

    cursor: default;
	
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	
	transform-origin: center center;
	will-change: transform;
	backface-visibility: hidden;
	-webkit-font-smoothing: antialiased;

    transition:
		transform .28s cubic-bezier(.22, .61, .36, 1),
		color .28s ease,
		text-shadow .28s ease;
}

.hof-title:hover {
    transform: translateZ(0) scale(1.035);
}

.hof-title-pvp:hover {
    color: #fff0d6;

    text-shadow:
        0 0 4px rgba(255, 245, 225, .95),
        0 0 10px rgba(205, 150, 255, .70),
        0 0 20px rgba(135, 75, 255, .42),
        0 0 34px rgba(95, 45, 210, .22),
        0 3px 8px rgba(0,0,0,1);
}

.hof-title-pk:hover {
    color: #ffe2d4;

    text-shadow:
        0 0 4px rgba(255, 240, 225, .95),
        0 0 10px rgba(255, 120, 85, .72),
        0 0 20px rgba(255, 45, 35, .44),
        0 0 34px rgba(180, 15, 20, .25),
        0 3px 8px rgba(0,0,0,1);
}

.hof-title-pvp {
    left: 17.1%;
    color: #ffe9c2;

    text-shadow:
        0 0 3px rgba(255,245,215,.95),
        0 0 10px rgba(255,215,120,.75),
        0 0 22px rgba(255,170,60,.45),
        0 3px 8px rgba(0,0,0,1);
}

.hof-title-pk {
    right: 17.3%;
    color: #ffd4be;

    text-shadow:
        0 0 3px rgba(255,235,220,.9),
        0 0 10px rgba(255,120,70,.72),
        0 0 22px rgba(255,40,20,.42),
        0 3px 8px rgba(0,0,0,1);
}

.hof-title,
.hof-table-caption,
.hof-cell {
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

.hof-cell-season-head,
.hof-cell-pvp-head,
.hof-cell-pk-head {
    color: rgba(238, 224, 202, .92);
    font-size: .84em;
    letter-spacing: 1.05px;

    text-shadow:
        0 0 4px rgba(255, 235, 185, .48),
        0 0 10px rgba(255, 160, 60, .24),
        0 2px 5px rgba(0,0,0,1);
}

.hof-table-layer {
    position: absolute;
    left: 17.1%;
    top: 77.2%;
    width: 66%;
    height: 15.6%;

    color: rgba(225, 210, 185, .86);
    text-align: center;
    text-shadow: 0 2px 4px rgba(0,0,0,.95);
}

.hof-table-caption,
.hof-cell {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.hof-table-caption {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;

    left: 0;
    top: -1%;
    width: 100%;
    height: 20%;

    color: #ead6b4;
    font-size: 1.18em;
    font-style: italic;
    letter-spacing: 1.8px;
    text-transform: uppercase;

    text-shadow:
        0 0 5px rgba(255, 235, 185, .7),
        0 0 14px rgba(255, 160, 60, .42),
        0 2px 5px rgba(0,0,0,1);
}

.hof-cell {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;

    font-size: .78em;
    text-transform: uppercase;
    color: rgba(220, 210, 195, .72);
}

/* Заголовки колонок */
.hof-cell-season-head {
    left: 2%;
    top: 26%;
    width: 22%;
    height: 18%;
}

.hof-cell-pvp-head {
    left: 24%;
    top: 26%;
    width: 39%;
    height: 18%;
}

.hof-cell-pk-head {
    left: 61%;
    top: 26%;
    width: 39%;
    height: 18%;
}

/* Первая строка сезона */
.hof-cell-season {
    left: 2%;
    width: 22%;

    text-transform: none;
    font-size: .94em;
    color: rgba(238, 228, 210, .88);
    letter-spacing: .35px;

    text-shadow:
        0 0 4px rgba(255, 220, 160, .34),
        0 2px 5px rgba(0,0,0,1);
}

.hof-cell-pvp {
    left: 24%;
    width: 39%;
}

.hof-cell-pk {
    left: 61%;
    width: 39%;
}

.hof-row-1 {
    top: 51%;
    height: 18%;
}

.hof-row-2 {
    top: 77%;
    height: 18%;
}

.hof-row-3 {
    top: 102%;
    height: 18%;
}

.hof-name {
    color: #ffe09a;
    font-size: 1.45em;
    letter-spacing: 1px;
    cursor: default;

    text-shadow:
        0 0 6px rgba(255, 210, 120, .75),
        0 0 16px rgba(255, 160, 60, .38),
        0 2px 5px rgba(0,0,0,.95);

    transform-origin: center center;
	will-change: transform;
	backface-visibility: hidden;
	
	transition:
		transform .28s cubic-bezier(.22, .61, .36, 1),
		text-shadow .28s ease;
}

.hof-name:hover {
    transform: translateZ(0) scale(1.045);
    text-shadow:
        0 0 8px rgba(255, 235, 150, .95),
        0 0 22px rgba(255, 170, 60, .65),
        0 2px 5px rgba(0,0,0,.95);
}

.hof-light-beam {
    position: absolute;
    z-index: 3;
    pointer-events: none;

    left: 36%;
    top: -1%;
    width: 28%;
    height: 15%;

    background:
        radial-gradient(ellipse at 50% 0%, rgba(120, 235, 255, .36), transparent 58%),
        linear-gradient(180deg, rgba(90, 210, 255, .22), transparent 70%);

    mix-blend-mode: screen;
    filter: blur(8px);
    opacity: .55;
    animation: hof-light-pulse 5.5s ease-in-out infinite;
	display: none;
}

@keyframes hof-light-pulse {
    0%, 100% {
        opacity: .38;
        transform: scaleX(.96);
    }

    50% {
        opacity: .72;
        transform: scaleX(1.04);
    }
}

.hof-particles {
    position: absolute;
    inset: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: screen;
}

@media (max-width: 960px) and (orientation: portrait) {
    html,
    body,
    .hof-body {
        overflow-x: hidden;
    }

    .hof-page {
        min-height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        display: block;
    }

    .hof-stage {
        width: 100vw;
        min-width: 0;
        height: 132vw;
        aspect-ratio: auto;

        background-size: auto 100%;
        background-position: center top;

        font-size: 10px;
        overflow: hidden;
    }

    .hof-header {
        top: 8.4%;
        left: 7%;
        width: 86%;
    }

    .hof-header h1 {
        font-size: 24px;
        letter-spacing: 1.8px;
    }

    .hof-subtitle {
        margin-top: 7px;
        font-size: 9px;
        line-height: 1.15;
        letter-spacing: 0;
		display: none;
    }

    .hof-title {
        top: 29.5%;
        width: 30%;
        font-size: 10px;
        letter-spacing: .8px;
    }

    .hof-title-pvp {
        left: 2.0%;
    }

    .hof-title-pk {
        right: 2.0%;
    }

    .hof-table-layer {
        left: 5%;
        top: 73.5%;
        width: 90%;
        height: 18%;
        font-size: 8px;
    }

    .hof-name {
        font-size: 1.15em;
        letter-spacing: .35px;
    }

    .hof-back {
        top: 10px;
        right: 10px;
        padding: 5px 8px;
        font-size: 10px;
    }

    .hof-particles {
        display: none;
    }
	
	.hof-table-caption {
		font-size: 0.91em;
		letter-spacing: 1.1px;
	}
	
	/* Заголовки колонок */
	.hof-cell-season-head {
		left: -1%;
		top: 22%;
	}
	
	.hof-cell-pvp-head {
		left: 23%;
		top: 22%;
	}

	.hof-cell-pk-head {
		left: 61%;
		top: 22%;
	}
	
	.hof-cell-season {
		left: -1%;
		top: 37px;
	}
	
	.hof-cell-pvp {
		left: 23%;
		top: 37px;
	}

	.hof-cell-pk {
		left: 61%;
		top: 37px;
	}

}

@media (max-width: 960px) and (orientation: landscape) {
    .hof-page {
        overflow-x: hidden;
        overflow-y: auto;
        display: flex;
        justify-content: center;
    }

    .hof-stage {
        width: 100vw;
        min-width: 0;
        height: auto;
        aspect-ratio: 1328 / 1152;
        background-size: 100% auto;
        background-position: center top;
        font-size: 8px;
    }

    .hof-header {
        top: 8.8%;
        left: 25%;
        width: 50%;
    }

    .hof-header h1 {
        font-size: clamp(22px, 4vw, 34px);
        letter-spacing: 3px;
    }

    .hof-subtitle {
        display: none;
    }

    .hof-title {
        top: 31.2%;
        width: 20%;
        font-size: clamp(13px, 2vw, 20px);
        letter-spacing: 2px;
    }

    .hof-title-pvp {
        left: 17.1%;
    }

    .hof-title-pk {
        right: 17.3%;
    }

    .hof-table-layer {
        left: 17.1%;
        top: 77.2%;
        width: 66%;
        height: 15.6%;
        font-size: 8px;
    }

    .hof-particles {
        display: none;
    }
}