/* Original Hammerfall artwork and dimensions; live Gesior content adapters. */
* { box-sizing:content-box; }
html,body { min-width:1030px; background:#000; }
body { line-height:normal; position:relative; isolation:isolate; }
/* Warm amber-brown tint from the original Noobwar mountain backdrop. */
body::before,body::after {
    filter:sepia(1) saturate(2.4) hue-rotate(-12deg) brightness(.5);
}
body::before {
    content:'';
    position:absolute;
    z-index:-3;
    pointer-events:none;
    inset:0 0 auto;
    height:850px;
    background-image:linear-gradient(#0003,#0003),url('img/forest-knight-background.png');
    background-size:100% 100%,cover;
    background-position:center top;
    background-repeat:no-repeat;
    mask-image:radial-gradient(ellipse 90% 100% at 50% 0,#000 48%,transparent 86%);
}
body::after {
    content:''; position:absolute; z-index:-2; pointer-events:none; inset:0 0 auto; height:850px;
    background:url('img/forest-knight-background.png') calc(50% + 500px) top / 1400px 1050px no-repeat;
    mask-image:linear-gradient(to right,transparent calc(50% + 440px),#000 calc(50% + 650px)),radial-gradient(ellipse 90% 100% at 50% 0,#000 48%,transparent 86%);
    mask-composite:intersect;
}
#chold { background:none; isolation:isolate; }
#chold::before,#chold::after { content:none; }
#chold #ch_in { background-image:none; }
/* Enlarge the original raster slices and content together on wider screens. */
@media (min-width:1320px) {
    #container { zoom:1.15; }
}
#header { display:block; }
#header { background:none; }
#logo img {
    margin:13px 0 0;
    filter:drop-shadow(0 3px 4px #170c07b3);
}
#header::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background:url('img/c_top.png') center top no-repeat;
    mask-image:url('img/header-cut.svg?v=4');
    mask-size:1030px 130px;
    mask-repeat:no-repeat;
}

/* Keep the atmosphere above the forest and below the portal. */
.hf-forest-atmosphere {
    --hf-forest-fade-top:65px;
    position:absolute;
    z-index:-1;
    inset:0 0 auto;
    height:750px;
    overflow:hidden;
    pointer-events:none;
    mask-image:linear-gradient(to bottom,transparent var(--hf-forest-fade-top),#000 145px);
}
.hf-forest-glow {
    position:absolute;
    top:-125px;
    left:50%;
    width:1040px;
    height:560px;
    transform:translateX(-50%);
    background:radial-gradient(ellipse closest-side,#ffbe666b, #e18c3833 58%, transparent);
    opacity:.75;
}
.hf-forest-mist {
    position:absolute;
    width:clamp(460px,43vw,980px);
    height:320px;
    filter:blur(10px);
    opacity:.82;
}
.hf-forest-mist-left {
    top:310px;
    right:calc(50% + 280px);
    background:
        radial-gradient(ellipse 48% 13% at 54% 39%,#d6ad7680,transparent),
        radial-gradient(ellipse 49% 23% at 38% 55%,#b48b5a91,transparent),
        radial-gradient(ellipse 43% 17% at 65% 67%,#ad845376,transparent);
}
.hf-forest-mist-right {
    top:340px;
    left:calc(50% + 270px);
    background:
        radial-gradient(ellipse 47% 12% at 48% 31%,#d6ad7680,transparent),
        radial-gradient(ellipse 48% 25% at 56% 48%,#b48b5a91,transparent),
        radial-gradient(ellipse 44% 18% at 36% 67%,#ad845376,transparent);
}
.hf-forest-ember {
    --ember-rise:calc(var(--hf-forest-fade-top) - var(--ember-height));
    position:absolute;
    left:calc(50% + var(--ember-offset));
    top:var(--ember-height);
    width:var(--ember-size);
    height:var(--ember-size);
    border-radius:50%;
    background:#ffd390;
    box-shadow:0 0 5px 1px #ff9c4b,0 0 11px 2px #d8601c80;
    opacity:0;
}
@media (prefers-reduced-motion:no-preference) {
    .hf-forest-glow { animation:hf-firelight 7s ease-in-out infinite; }
    #header::before { animation:hf-firelight-metal 7s ease-in-out infinite; }
    .hf-forest-mist-left { animation:hf-mist-drift 20s ease-in-out infinite alternate; }
    .hf-forest-mist-right { animation:hf-mist-drift 27s -9s ease-in-out infinite alternate-reverse; }
    .hf-forest-ember { animation:hf-ember-rise var(--ember-duration) var(--ember-delay) linear infinite; }
}
@keyframes hf-firelight {
    0%,100% { opacity:.68; }
    21%,67% { opacity:1; }
    32%,79% { opacity:.47; }
    47% { opacity:.86; }
}
@keyframes hf-firelight-metal {
    0%,100% { filter:brightness(1.04); }
    21%,67% { filter:brightness(1.2) sepia(.18); }
    32%,79% { filter:brightness(1); }
    47% { filter:brightness(1.12) sepia(.1); }
}
@keyframes hf-mist-drift {
    from { transform:translate(-64px,12px) scaleX(.95); opacity:.67; }
    to { transform:translate(70px,-12px) scaleX(1.15); opacity:.96; }
}
@keyframes hf-ember-rise {
    0% { transform:translate(0,0); opacity:0; }
    18% { opacity:.96; }
    53% { transform:translate(calc(var(--ember-drift) * .35),calc(var(--ember-rise) * .53)); }
    91% { opacity:.85; }
    100% { transform:translate(var(--ember-drift),var(--ember-rise)); opacity:0; }
}

#headline a:focus-visible,.left_links a:focus-visible { outline:2px solid #d3b847; outline-offset:-3px; }
#headline .hf-tab-label { display:inline-block; width:120px; height:30px; font:normal 17px/30px 'Times New Roman',serif; text-transform:uppercase; color:#baa65b; text-shadow:0 1px 1px #000,0 0 2px #99875c; }
.hf-menu-title { display:inline-block; width:120px; height:30px; vertical-align:bottom; font:normal 16px/30px 'Times New Roman',serif; text-transform:uppercase; color:#baa65b; text-shadow:0 1px 1px #000,0 0 2px #99875c; }
.left_links .active a { color:#e7ce56; }
.route-createaccount,.route-buypoints,.route-wars { color:#f33; font-weight:bold; }
.route-guilds { color:#ff0; font-weight:bold; }
.route-team { color:#00e5ed; font-weight:bold; }
.route-shopsystem,.hf-green { color:green; }
.hf-red { color:#e54b40; }
#center { display:block; }
#center h1 { font-size:15px; margin:0 0 20px; text-align:center; color:#cfb85e; }
#center h2 { font-size:11px; margin:0 0 8px; }
.hf-rankings { padding:0 7px; margin:0 0 14px; }
.hf-guilds { display:flex; gap:4px; margin:0 0 14px; }
.hf-guilds>div { flex:1; text-align:center; min-width:0; }
.hf-guilds img { object-fit:contain; }
.hf-fraggers { border-collapse:collapse; width:100%; font-size:11px; text-align:center; }
.hf-fraggers th { background:#000; height:22px; }
.hf-fraggers td { padding:4px; border:1px solid #333; }
.hf-fraggers tr:nth-child(odd) td { background:darkgrey; }
.hf-fraggers tr:nth-child(even) td { background:grey; }
.hf-news { width:560px; margin:0 0 4px; background:url('img/cw_mid.jpg') repeat-y; }
.hf-news-body { padding:20px 40px 0; min-height:70px; overflow-wrap:break-word; }
.hf-news-body h2 { margin:0 0 22px!important; text-align:center; }
.hf-news-body p { margin:0 0 12px; }
.hf-news-footer { box-sizing:border-box; height:70px; padding:29px 40px 0; background:url('img/cw_bottom.jpg') no-repeat; text-align:center; }
.hf-post-text { line-height:1.15; }
.hf-subpage { padding:8px; min-height:400px; }
.hf-page { overflow-wrap:normal; }
.hf-page table { max-width:100%; border-collapse:collapse; overflow-wrap:normal; font-size:11px; }
.hf-page table { box-sizing:border-box; }
.hf-page .TableContainer,.hf-page .TableContainer table { font-size:11px; }
.hf-page td,.hf-page th { padding:4px; word-break:normal; }
.hf-page .LabelV { min-width:100px; white-space:nowrap; }
.hf-page .TableContainer :is(td,.InnerTableContainer) { background-color:#222!important; color:#fff; }
.hf-page .TableContainer :is(.CaptionContainer,.CaptionInnerContainer) { background-color:#302d27!important; }
.hf-page a { color:#d6bf6a; }
.hf-page input,.hf-page select,.hf-page textarea { max-width:100%; box-sizing:border-box; }
.hf-page :is(.TableContainer,.TableContentContainer,.TableContentAndRightShadow,.BoxContent) { max-width:100%; }
.hf-page .CaptionContainer { color:#ddc465; padding:7px; background:#272522; }
.hf-page .TableContent { background:#161616; }
.hf-page .BigButton { margin:8px auto; }
.hf-page .TableShadowContainer,.hf-page .TableShadowContainerRightTop { display:none; }
#rsban3 { padding:0 26px 30px; text-align:center; line-height:1.6; }
#rsban3 p { margin:0; }
.hf-server-state { padding-top:0; }
.hf-server-state b { display:inline-block; margin-bottom:4px; font-size:13px; }
#rsban3 .hf-server-rates { margin-top:12px; padding-top:10px; border-top:1px solid #333; }
.hf-extra-links { padding-top:0; }
.hf-extra-links a { display:block; font:bold 13px Arial,sans-serif; }
.hf-extra-links span { display:block; margin:2px 0; }
#right_side .hf-extra-links .hf-green { color:lime; }
#footer p { padding-top:145px; text-align:center; color:#8a8065; }

.hf-page img { max-width:100%; height:auto; object-fit:contain; }
.hf-page .ButtonText { max-width:none; }
.hf-page .hf-signature { width:100%; table-layout:fixed; }
.hf-page .TableContainer .InnerTableContainer { box-sizing:border-box; width:100%; }
.hf-page .TableContainer .LabelV { width:110px; }
.hf-page .TableContainer .LabelV+td { width:auto!important; }
.hf-page .TableContainer { box-sizing:border-box; width:100%; }
.hf-page .TableContainer :is(.CaptionContainer,.CaptionInnerContainer) { box-sizing:border-box; width:100%; }
.hf-page .TableContainer .CaptionContainer { padding:0; }
.hf-page-characters td { overflow-wrap:break-word; }
.hf-page-characters table { table-layout:auto; }
.hf-page-characters>table { width:100%; }
.hf-page-createaccount textarea { width:100%; min-height:220px; }
.hf-page-createaccount td { vertical-align:top; }
.hf-page .hf-data-table { width:100%; border-collapse:collapse; margin:15px 0; }
.hf-data-table th { background:#000; text-align:left; }
.hf-data-table td,.hf-data-table th { padding:6px; border:1px solid #333; }
.hf-data-table tr:nth-child(odd) td { background:#808080; }
.hf-data-table tr:nth-child(even) td { background:#a9a9a9; }
.hf-notice { padding:14px; background:#252525; border:1px solid #555; line-height:1.5; }
.hf-page :is(input[type=text],input[type=password],input[type=email],select,textarea) { font:11px Tahoma,Arial,sans-serif; }
.hf-page textarea { max-width:100%; }
.hf-page>h1,.hf-page>center>h2 { margin:12px 0 22px!important; }
.hf-page table[width='100%'] { width:100%; }
.hf-highscores { display:block; }
.hf-highscores-main { min-width:0; }
#center .hf-highscores h1 { color:#fff; font:bold 14px/1.3 Arial,sans-serif; margin:12px 0 30px; white-space:nowrap; }
.hf-world-selection { margin:0 0 28px; background:#808080; }
#center .hf-world-selection h2,#center .hf-skill-list h2 { margin:0; padding:4px; color:#fff; background:#000; font:bold 11px/1.1 Tahoma,Arial,sans-serif; }
.hf-world-selection>div { display:flex; align-items:center; gap:5px; padding:7px 4px; }
.hf-world-selection button { width:120px; height:18px; padding:0; border:1px solid #666; border-radius:8px; color:#fff; background:linear-gradient(#888,#666); font:bold 10px Tahoma,Arial,sans-serif; cursor:pointer; }
.hf-skill-list { background:#808080; }
.hf-skill-list>div { padding:4px; }
.hf-page .hf-skill-list a { display:block; color:#fff; font-size:11px; line-height:1.12; }
.hf-skill-list a[aria-current] { text-decoration:underline; }
.hf-page .hf-score-table { width:100%; table-layout:fixed; border-collapse:collapse; font-size:11px; }
.hf-score-table .hf-col-rank { width:32px; }
.hf-score-table .hf-col-level { width:48px; }
.hf-score-table .hf-col-status { width:44px; }
.hf-score-table .hf-col-points { width:94px; }
.hf-score-table th { padding:4px 3px; text-align:left; background:#000; white-space:nowrap; }
.hf-score-table td { padding:5px 3px; border:1px solid #333; vertical-align:middle; white-space:nowrap; }
.hf-score-table tr:nth-child(odd) td { background:#808080; }
.hf-score-table tr:nth-child(even) td { background:#a9a9a9; }
.hf-score-table .hf-score-name { white-space:normal; overflow-wrap:break-word; }
.hf-score-name small { display:block; font-size:9px; }
.hf-page a.hf-player-offline { color:#ff1818; }
.hf-page a.hf-player-online { color:#00a022; }
.hf-score-table .hf-premium { text-align:center; font-weight:bold; }
.hf-score-table .hf-score-points { font-size:10px; }
.hf-pagination { display:flex; justify-content:space-between; margin:12px 0; }
.hf-character-stats { display:grid; grid-template-columns:144px minmax(0,1fr); gap:16px; margin:15px 0; align-items:start; }
.hf-character-stats .hf-equipment { width:144px; table-layout:fixed; text-align:center; background:#808080; }
.hf-page .hf-equipment td { width:auto; height:46px; padding:2px; }
.hf-equipment img { width:40px; height:40px; object-fit:contain; }
.hf-character-values { min-width:0; }
.hf-character-values table { width:100%; table-layout:fixed; }
.hf-character-values th { width:88px; text-align:left; }
.hf-character-values td { overflow-wrap:break-word; }
.hf-page .hf-character-values .hf-data-table { margin:0; font-size:10px; }
.hf-character-values .hf-data-table th { width:74px; background:#70716e; font-size:10px; line-height:1.3; }
.hf-character-values .hf-data-table :is(th,td) { padding:5px 4px; border-color:#62635f; }
.hf-character-values .hf-data-table td { overflow-wrap:anywhere; line-height:1.3; }
.hf-progress { box-sizing:border-box; width:100%; height:5px; border:1px solid #000; margin-top:3px; background:#444; overflow:hidden; }
.hf-progress span { display:block; height:100%; background:#b92222; }
.hf-progress.hf-mana span { background:#172ae5; }
.bbcode-image { display:block; max-width:100%; height:auto; margin:8px 0; }
.bbcode-smiley { width:16px; height:16px; vertical-align:middle; }
.bbcode-code { white-space:pre-wrap; overflow-wrap:break-word; padding:10px; background:#222; }
.bbcode-quote { padding:10px; margin:10px 0; background:#252525; border-left:3px solid #aaa; }
.bbcode-list { margin:8px 0 8px 22px; }
.bbcode-center { text-align:center; }
.bbcode-left { text-align:left; }
.bbcode-right { text-align:right; }
.bbcode-justify { text-align:justify; }
.bbcode-video iframe { width:100%; aspect-ratio:16/9; height:auto; border:0; }

/* Each area is a separate metal-framed panel, with the forest between them. */
#chold #ch_in { display:grid; grid-template-columns:230px minmax(0,1fr) 220px; gap:15px; align-items:start; overflow:visible; }
#header { grid-column:1 / -1; width:100%; margin:0; }
#left_side,#right_side,#center { float:none; margin:0; min-width:0; }
#left_side { width:230px; margin-top:-14px; }
#left_side .left_links { position:relative; background:none; }
#left_side .left_links>.ll_out,#left_side .left_links>.ll_out2 {
    background-image:url('img/ll_bottom.jpg'),url('img/ll_mid.jpg');
    background-position:center bottom,center 100px;
    background-repeat:no-repeat,repeat-y;
    clip-path:polygon(13px 3px,28px 8px,198px 8px,213px 3px,210px 20px,210px calc(100% - 18px),213px calc(100% - 8px),198px calc(100% - 11px),28px calc(100% - 11px),13px calc(100% - 8px),16px calc(100% - 18px),16px 20px);
}
#left_side .left_links:first-child>.ll_out {
    clip-path:polygon(13px 14px,28px 18px,198px 18px,213px 14px,210px 32px,210px calc(100% - 18px),213px calc(100% - 8px),198px calc(100% - 11px),28px calc(100% - 11px),13px calc(100% - 8px),16px calc(100% - 18px),16px 32px);
}
#right_side { width:220px; margin-top:-4px; }
#right_side #rsban { position:relative; width:220px; margin:0 0 16px; background:none; }
#right_side #rsban2 { background-image:url('img/rsban_top.jpg'),url('img/rsban_mid.jpg'); background-position:center top; background-repeat:no-repeat,repeat-y; clip-path:polygon(8px 4px,25px 8px,195px 8px,212px 4px,209px 23px,209px calc(100% - 18px),212px calc(100% - 11px),8px calc(100% - 11px),11px calc(100% - 18px),11px 23px); }
#right_side .rsb { position:relative; width:220px; margin:0 0 16px; background:none; }
#right_side .rsb2 { background-image:url('img/rsb_top.jpg'),url('img/rsb_bottom.jpg'),url('img/rsb_mid.png'); background-size:220px 73px,220px 40px,230px 10px; background-position:center top,center bottom,-10px top; background-repeat:no-repeat,no-repeat,repeat-y; clip-path:polygon(8px 8px,24px 13px,196px 13px,212px 8px,209px 26px,209px calc(100% - 18px),212px calc(100% - 11px),8px calc(100% - 11px),11px calc(100% - 18px),11px 26px); }
#right_side .rsb3 { background:none; }
#right_side .hf-sidebar-frags { padding:0 22px 30px; }
.hf-sidebar-frags h2,.hf-sidebar-discord h2 { margin:0 0 10px; color:#fff; font:bold 13px/1.3 Tahoma,Arial,sans-serif; }
#right_side .hf-discord-frame { margin-top:24px; }
#right_side .hf-discord-frame .rsb2 { padding-top:24px; }
#right_side .hf-sidebar-discord { box-sizing:border-box; width:100%; min-width:0; padding:0 28px 30px; }
.hf-sidebar-discord > h2,.hf-sidebar-discord > .hf-discord-status,.hf-sidebar-discord > .hf-discord-member-window,.hf-sidebar-discord > .hf-discord-footer { box-sizing:border-box; width:100%; min-width:0; }
.hf-panel-badge,.hf-discord-badge { position:absolute; z-index:1; top:-12px; left:calc(50% - 16px); display:grid; place-items:center; box-sizing:border-box; width:32px; height:32px; border:3px ridge #606060; border-radius:50%; background:radial-gradient(circle,#303039,#080809 75%); box-shadow:0 0 0 2px #141414,0 2px 5px #000; pointer-events:none; }
.hf-panel-badge img { display:block; width:22px; height:22px; object-fit:contain; }
#left_side .hf-panel-badge { top:-17px; left:calc(50% - 18px); }
#left_side .left_links:first-child .hf-panel-badge { top:-6px; }
#rsban > .hf-panel-badge { top:-16px; }
.hf-discord-badge svg { width:18px; height:18px; fill:#a99bff; }
.hf-sidebar-discord h2 { margin:0 0 4px; padding:3px 0; border:1px solid #474747; background:linear-gradient(#ffffff08,#0006),url('img/rsb_top.jpg') center; color:#bdbdbd; font:22px/1.2 Georgia,'Times New Roman',serif; text-shadow:0 1px 2px #000; }
.hf-sidebar-discord .hf-discord-status { margin:0; padding:7px 2px; background:#555; color:#ddd; text-align:center; text-transform:uppercase; font:10px/1.3 Arial,sans-serif; }
.hf-discord-member-window { height:234px; box-sizing:border-box; overflow-y:auto; padding:7px 9px; background:#212121; text-align:left; scrollbar-width:thin; scrollbar-color:#444 #212121; }
.hf-discord-member-window:focus-visible { outline:1px solid #a99bff; outline-offset:-1px; }
.hf-sidebar-discord .hf-discord-members { margin:0; padding:0; list-style:none; }
.hf-discord-member { display:flex; align-items:center; gap:6px; min-height:26px; color:#aaa; font:14px/1.3 Arial,sans-serif; }
.hf-discord-avatar { position:relative; flex:none; width:16px; height:16px; border-radius:50%; background:#5865f2; }
.hf-discord-avatar img { display:block; width:16px; height:16px; border-radius:50%; object-fit:cover; }
.hf-discord-presence { position:absolute; right:-1px; bottom:-1px; width:5px; height:5px; border:1px solid #212121; border-radius:50%; background:#43b581; }
.hf-discord-presence.is-idle { background:#faa61a; }
.hf-discord-presence.is-dnd { background:#f04747; }
.hf-discord-member-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hf-sidebar-discord .hf-discord-message { margin:0; padding:12px 2px; color:#aaa; font:12px/1.6 Arial,sans-serif; }
.hf-discord-footer { padding:6px; background:#171717; }
.hf-sidebar-discord .hf-discord-join { display:block; box-sizing:border-box; width:120px; max-width:100%; margin:0 auto; padding:7px 12px; border:1px solid #292929; border-radius:3px; background:#303030; color:#fff; font:12px/1.3 Arial,sans-serif; text-align:center; }
.hf-sidebar-discord .hf-discord-join:hover,.hf-sidebar-discord .hf-discord-join:focus-visible { background:#404040; text-decoration:underline; }
.hf-sidebar-frags table { width:100%; table-layout:fixed; border-collapse:collapse; text-align:left; font:11px/1.4 Tahoma,Arial,sans-serif; }
.hf-sidebar-frags th,.hf-sidebar-frags td { padding:5px 2px; border-bottom:1px solid #292929; color:#fff; }
.hf-sidebar-frags th { color:#ddd; font-size:10px; }
.hf-sidebar-frags .hf-frag-rank { width:20px; }
.hf-sidebar-frags .hf-frag-count { width:33px; }
.hf-sidebar-frags td:last-child,.hf-sidebar-frags th:last-child { text-align:right; }
.hf-sidebar-frags a { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hf-sidebar-frags a { color:#fff; }
.hf-sidebar-frags a:hover { text-decoration:underline; }
.hf-sidebar-frags tbody tr:last-child td { border-bottom:0; }
.hf-sidebar-frags .hf-frags-empty { padding:8px 4px; text-align:center!important; color:#eee; line-height:1.6; }
/* Original dark stone texture, softly fading around the central frame. */
.hf-center-surround { position:relative; min-width:0; margin-top:-40px; isolation:isolate; }
.hf-center-surround::before {
    content:''; position:absolute; z-index:-1; pointer-events:none;
    inset:-30px -25px -40px;
    background:url('img/con_mid.jpg') center top / 1030px 130px repeat-y;
    mask-image:linear-gradient(to right,transparent,#000 30px,#000 calc(100% - 30px),transparent),linear-gradient(to bottom,transparent,#000 30px,#000 calc(100% - 40px),transparent);
    mask-composite:intersect;
}
#center {
    box-sizing:border-box; position:relative; width:100%; padding:0 30px 18px 24px;
    /* The original right rail starts at x=530 of 560; its inset is wider than the left. */
    background-image:linear-gradient(to right,transparent 4.285714%,#808080 4.285714%,#808080 94.642857%,transparent 94.642857%),url('img/cw_mid.jpg');
    background-position:center top;
    background-size:100% 100%,100% auto;
    background-repeat:no-repeat,repeat-y;
}
#center::before,#center::after { content:''; position:absolute; left:0; width:100%; pointer-events:none; background:url('img/cw_bottom.jpg') center bottom / 100% 70px no-repeat; }
#center::before { content:none; }
#center::after { bottom:0; height:18px; }
.hf-center-title { position:relative; height:64px; margin:0 -30px 0 -24px; display:flex; align-items:center; justify-content:center; }
.hf-center-title::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    /* Turn the finished bottom corners into top corners; the open edge joins the rails. */
    background:url('img/cw_bottom.jpg') center bottom / 100% 70px no-repeat;
    transform:scaleY(-1);
}
#center .hf-center-title h1 { position:relative; margin:0; padding:8px 58px 0; transform:translateY(5px); color:#cfb85e; font:bold 14px/1.2 Tahoma,Arial,sans-serif; text-align:center; }
.hf-subpage { min-height:0; padding:4px; color:#fff; }
.hf-news { width:100%; background:none; margin:0 0 22px; }
.hf-news-body { padding:10px 8px 0; }
.hf-news-footer { height:auto; min-height:28px; margin:12px 8px 0; padding:12px 0 0; border-top:1px solid #555; background:none; }
.hf-center-content { box-sizing:border-box; min-width:0; padding:14px 12px 8px; color:#deded8; background:none; }
.hf-center-content .hf-rankings { padding:0; margin-bottom:20px; }
#center .hf-panel-heading {
    box-sizing:border-box; display:flex; align-items:center; gap:9px;
    width:100%; min-height:38px; margin:0 0 10px; padding:4px 10px;
    border:7px solid #454740;
    border-image:url('img/ll_li.jpg') 8 10 8 10 / 7px / 0 stretch;
    background:#191b18; color:#dfcb8b;
    font:bold 14px/1.3 Georgia,'Times New Roman',serif;
    text-align:left; text-shadow:1px 1px #000;
}
.hf-panel-heading img { flex:none; width:24px; height:24px; object-fit:contain; }
.hf-panel-heading span { min-width:0; overflow-wrap:anywhere; }
#center .hf-news > .hf-panel-heading { width:calc(100% + 2px); margin:-1px -1px 0; }
.hf-guilds { gap:12px; margin-bottom:18px; }
.hf-guilds>div { padding:12px 6px; border:1px solid #ffffff0d; background:#0000001a; line-height:1.5; }
.hf-fraggers th { background:#191a18; color:#c9ba8a; }
.hf-fraggers tr:nth-child(n) td { background:#343532; border-color:#484943; padding:8px; color:#c2c2b9; }
.hf-center-content .hf-news { box-sizing:border-box; border:1px solid #494a43; background:#1c1d1b66; margin-bottom:16px; }
.hf-center-content .hf-news-body { padding:14px 14px 0; }
.hf-post-text { line-height:1.55; }
.hf-post-text img { max-width:100%; height:auto; }
.hf-center-content .hf-news-footer { margin:14px 14px 0; padding:10px 0; min-height:0; border-color:#494a43; color:#aaa99e; font-size:10px; }
.hf-news-footer .hf-green { color:#b7bf88; }
/* Original button artwork, with fixed dimensions instead of table-driven shrinking. */
#center input[type=image][src*="/buttons/"],
#center a > img[src*="/buttons/"] {
    box-sizing:content-box; width:120px; min-width:120px; max-width:none;
    height:18px; min-height:18px; padding:0; border:0; object-fit:contain;
    vertical-align:middle;
}
#center .hf-image-button-cell { min-width:120px; }
#center .BigButton,#center .BigButtonOver {
    width:120px; height:18px; background-size:120px 18px;
}
#center .ButtonText { width:120px; height:18px; }
#center :is(button,input[type=submit],input[type=button],input[type=reset]) {
    box-sizing:border-box; width:120px; min-width:120px; max-width:none; height:18px;
    padding-top:0; padding-bottom:0;
}
/* Skill icons keep their original square shape in nine equal columns. */
/* Match account panels and their legacy layered controls to the gray subpages. */
#center .hf-page-accountmanagement .BigButton {
    background-image:url('images/buttons/empty.png')!important;
    background-repeat:no-repeat;
}
#center .hf-page-accountmanagement .BigButtonOver { display:none; }
#center .hf-page-accountmanagement .BigButton .ButtonText { opacity:0; z-index:2; cursor:pointer; }
.hf-account-button-label { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; color:#fff; font:bold 8px/1 Tahoma,Arial,sans-serif; text-align:center; }
#center .hf-page-accountmanagement .BigButton:focus-within { outline:1px solid #d3b847; outline-offset:2px; }
#center .hf-page-accountmanagement .BigButton:hover { filter:brightness(1.15); }
#center .hf-page-accountmanagement :is(.SmallBox .Message,.SmallBox .ErrorMessage) { background:#808080; color:#fff; }
#center .hf-page-accountmanagement :is(.Table1,.Table2,.Table3,.Table4,.Table5,.Table6,.TableContentContainer,.InnerTableContainer) { background-color:#292a28!important; border-color:#555!important; }
#center .hf-page-accountmanagement :is(.CaptionContainer,.CaptionInnerContainer,.LabelH,.LabelH td) { background-color:#000!important; }
#center .hf-page-accountmanagement .TableContent tr:nth-child(odd) > td { background-color:#808080!important; }
#center .hf-page-accountmanagement .TableContent tr:nth-child(even) > td { background-color:#a9a9a9!important; }
#center .hf-page-accountmanagement .TableContainer td { border-color:#555!important; }
#center .hf-page-accountmanagement .TableContentAndRightShadow { background-image:none!important; }
.hf-page-accountmanagement .TopButton img { filter:grayscale(1); }
/* Shared account-style section frames for every subpage. */
.hf-section-box { box-sizing:border-box; position:relative; width:100%; min-width:0; margin:0 0 18px; border:1px solid #080808; background:#222; box-shadow:inset 0 0 0 1px #60615c; text-align:left; }
#center .hf-section-caption,#center .hf-world-selection .hf-section-caption,#center .hf-skill-list .hf-section-caption {
    box-sizing:border-box; position:relative; margin:0; padding:5px 10px;
    color:#fff; font:bold 13px/1.2 Georgia,'Times New Roman',serif; text-align:left;
    background-color:#000;
    background-image:url('images/content/table-headline-border.gif'),url('images/content/table-headline-border.gif');
    background-position:left top,left bottom; background-repeat:repeat-x;
    background-size:auto 4px;
    border-left:2px solid #6a746f; border-right:2px solid #6a746f;
}
.hf-section-caption::after { content:''; position:absolute; pointer-events:none; inset:-2px; background-image:url('images/content/box-frame-edge.gif'),url('images/content/box-frame-edge.gif'),url('images/content/box-frame-edge.gif'),url('images/content/box-frame-edge.gif'); background-repeat:no-repeat; background-position:left top,right top,left bottom,right bottom; background-size:5px 5px; }
.hf-section-body { box-sizing:border-box; min-width:0; padding:12px; }
.hf-page .hf-section-body > table { width:100%; margin:0; }
.hf-section-body > .hf-character-stats { margin:0; }
.hf-page .hf-section-body .hf-skills { margin:0; }
.hf-page .hf-section-body table td { vertical-align:middle; }
.hf-highscores { gap:16px; }
.hf-world-selection.hf-section-box { margin-bottom:18px; }
.hf-world-selection > .hf-section-body { padding:12px; flex-wrap:wrap; }
.hf-skill-list .hf-section-body { padding:10px 5px; }
#center .hf-skill-list .hf-section-caption { padding:5px; font-size:11px; }
.hf-section-box .hf-pagination { margin-bottom:0; }
#center .hf-page .TableContainer :is(.CaptionContainer,.CaptionInnerContainer) { background-color:#000!important; }
#center .hf-page :is(.Table1,.Table2,.Table3,.Table4,.Table5,.Table6,.TableContentContainer,.InnerTableContainer) { background-color:#222!important; border-color:#555!important; }
#center .hf-page .TableContent tr:nth-child(odd) > td { background-color:#808080!important; }
#center .hf-page .TableContent tr:nth-child(even) > td { background-color:#a9a9a9!important; }
#center .hf-page .TableContainer td { border-color:#555!important; }
#center .hf-page .TableContentAndRightShadow { background-image:none!important; }
.hf-guild-detail { min-width:0; }
.hf-guild-heading { display:flex; align-items:center; gap:12px; }
.hf-page .hf-guild-heading img { flex:none; width:64px; height:64px; }
#center .hf-guild-heading h1 { flex:1; min-width:0; margin:0; overflow-wrap:anywhere; }
.hf-page .hf-guild-members { table-layout:fixed; }
.hf-guild-members form { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0; }
.hf-guild-nick { display:flex; flex-wrap:wrap; align-items:center; gap:6px; max-width:100%; }
.hf-page .hf-guild-nick input[type=text] { width:130px; min-width:0; }
#center .hf-guild-nick input[type=submit] { width:70px; min-width:70px; }
.hf-guild-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:24px 0 8px; }
.hf-guild-actions form { flex:0 0 96px; margin:0; padding:0; }
#center :is(.hf-page-guilds,.hf-page-characters,.hf-page-createaccount,.hf-page-highscores,.hf-page-accountmanagement) input[type=image][src*="/buttons/"],
#center :is(.hf-page-guilds,.hf-page-characters,.hf-page-createaccount,.hf-page-highscores,.hf-page-accountmanagement) a > img[src*="/buttons/"] {
    width:96px; min-width:96px; height:14.4px; min-height:14.4px;
}
#center :is(.hf-page-guilds,.hf-page-characters,.hf-page-createaccount,.hf-page-highscores,.hf-page-accountmanagement) .hf-image-button-cell { min-width:96px; }
#center :is(.hf-page-guilds,.hf-page-characters,.hf-page-createaccount,.hf-page-highscores,.hf-page-accountmanagement) :is(.BigButton,.BigButtonOver) {
    width:96px; height:14.4px; background-size:96px 14.4px;
}
#center .hf-page-highscores .hf-world-selection button { width:96px; min-width:96px; height:14.4px; min-height:14.4px; }
.hf-page .hf-guild-list { width:100%; table-layout:fixed; }
.hf-guild-list .hf-guild-entry > td { padding:12px 8px; vertical-align:middle; }
.hf-page .hf-guild-list .hf-guild-logo { display:block; width:72px; height:72px; max-width:none; object-fit:contain; }
.hf-guild-list .hf-guild-description { line-height:1.5; overflow-wrap:anywhere; }
.hf-guild-list form { margin:0; }
.hf-page .hf-skills { width:100%; table-layout:fixed; margin:6px 0 18px; }
.hf-page .hf-skills td { padding:4px 1px; text-align:center; }
.hf-page .hf-skills img { display:block; width:40px; height:40px; max-width:none; margin:2px auto; object-fit:contain; }
.hf-page .hf-equipment img { width:40px; height:40px; object-fit:contain; }
.hf-page .hf-online-vocations { width:100%; table-layout:fixed; margin:12px 0 20px; }
.hf-online-vocations td { text-align:center; }
.hf-page .hf-online-vocations img { display:block; width:100%; height:180px; object-fit:contain; }
.hf-page .hf-online-players { table-layout:fixed; }
.hf-page-whoisonline a { color:#fff; }
.hf-page-whoisonline .hf-online-players td { overflow-wrap:anywhere; }
.hf-page-whoisonline a:hover { text-decoration:underline; }

/* Compact download tables in the same style as the classic server pages. */
.hf-downloads .hf-section-box { margin-bottom:14px; }
.hf-downloads .hf-section-body { padding:6px; }
.hf-page .hf-download-table { table-layout:fixed; color:#111; font:11px/1.4 Tahoma,Arial,sans-serif; }
.hf-download-table .hf-download-icon { width:44px; }
.hf-download-table .hf-download-link { width:108px; }
.hf-page .hf-download-table td { padding:8px 6px; border:1px solid #4b4b4b; }
.hf-download-table img { display:block; width:32px; height:32px; object-fit:contain; margin:auto; }
.hf-download-table strong { font-size:12px; }
.hf-download-table p { margin:3px 0 0; }
.hf-download-table .hf-download-file { text-align:center; }
.hf-page .hf-download-table a { color:#30220b; font-weight:bold; text-decoration:underline; }
.hf-page .hf-download-table a:hover { color:#000; }
.hf-download-table a:focus-visible { outline:2px solid #30220b; outline-offset:3px; }
.hf-download-table small { display:block; margin-top:3px; font-size:10px; }
#footer { width:100%; height:auto; padding:18px 0; background:none; }
#footer p { padding:0; }
/* Short decorative links join the floating panels without a shared backdrop. */
#left_side,#right_side { isolation:isolate; }
#header { isolation:isolate; margin-bottom:31px; }
#header::after {
    content:''; position:absolute; z-index:-1; top:80px; left:0;
    width:1030px; height:150px; pointer-events:none;
    background:url('img/con_top.jpg') left top / 1030px 250px no-repeat;
    mask-image:url('img/top-drapes.svg?v=4'); mask-size:1030px 150px;
}
#left_side .left_links+.left_links::before,#left_side .left_links+.left_links::after,
#right_side .rsb::before,#right_side .rsb::after {
    content:''; position:absolute; pointer-events:none; z-index:-1;
    width:14px;
    background:url('img/con_top.jpg') -50px -54px / 1030px 250px no-repeat;
    mask-image:url('img/chain-cut.svg?v=2'); mask-size:14px 70px; mask-repeat:no-repeat;
}
#left_side .left_links+.left_links::before { top:-30px; left:44px; height:44px; }
#left_side .left_links+.left_links::after { top:-30px; right:39px; height:44px; }
#right_side .rsb::before { top:-30px; left:38px; height:49px; }
#right_side .rsb::after { top:-30px; right:30px; height:49px; }