/* Responsive home for the Abyssal Blossom forum. */
:root {
    color-scheme: dark;
    --yh-bg: #0b0d11;
    --yh-surface: #13171d;
    --yh-line: #43474e;
    --yh-ink: #f1e9e8;
    --yh-muted: #c3bbc0;
    --yh-rose: #f6b7ce;
    --yh-accent: #ed578b;
    --yh-serif: "Noto Serif TC", "Source Han Serif TC", "Songti TC", "PMingLiU", SimSun, serif;
    --yh-sans: "Microsoft JhengHei", "PingFang TC", system-ui, sans-serif;
    --yh-hero-pc: url("/ui-art/hero-desktop.jpg");
    --yh-hero-mobile: url("/ui-art/hero-mobile.jpg");
}

.yh-site,
.yh-site * {
    box-sizing: border-box;
}

.yh-site {
    margin: 0;
    color: var(--yh-ink);
    background:
        radial-gradient(ellipse at 46% 43%, #1a1c23 0%, transparent 54%),
        repeating-linear-gradient(122deg, #ffffff03 0 1px, transparent 1px 9px),
        var(--yh-bg);
    font: 15px/1.5 var(--yh-sans);
}

.yh-site a {
    color: inherit;
    text-decoration: none;
}

.yh-site button,
.yh-site input {
    font: inherit;
}

.yh-site button {
    color: inherit;
}

.yh-site button,
.yh-site a,
.yh-site summary {
    -webkit-tap-highlight-color: transparent;
}

.yh-site button:not(:disabled),
.yh-site summary {
    cursor: pointer;
}

.yh-site :is(a, button, input, summary):focus-visible {
    outline: 2px solid var(--yh-rose);
    outline-offset: 3px;
}

.yh-site [hidden],
.yh-site .yh-mobile-only {
    display: none !important;
}

.yh-sr-only,
.yh-skip:not(:focus) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.yh-skip:focus {
    position: fixed;
    z-index: 10;
    top: 10px;
    left: 10px;
    padding: 7px 12px;
    background: #1b131c;
}

.yh-topbar {
    position: relative;
    z-index: 2;
    border-bottom: 1px solid #a1a4ab5e;
    background: #0b0d12e6;
}

.yh-top-inner {
    max-width: 1586px;
    min-height: 33px;
    margin-inline: auto;
    padding-inline: clamp(20px, 7vw, 110px) clamp(20px, 4vw, 65px);
    display: flex;
    align-items: center;
    gap: 19px;
    font-size: 13px;
}

.yh-top-inner > .yh-brand {
    color: #f4e4e8;
    white-space: nowrap;
    letter-spacing: .09em;
}

.yh-top-inner .yh-tools {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .75em;
    color: #e2dbe1;
    white-space: nowrap;
}

.yh-top-inner :is(.yh-tools a, .yh-brand):hover {
    color: var(--yh-rose);
}

.yh-top-inner .yh-tools button {
    padding: 0;
    background: transparent;
    border: 0;
}

.yh-top-inner .yh-tools button:hover {
    color: var(--yh-rose);
}

.yh-bookmark {
    border: 0;
    border-left: 1px solid #b8a9b0;
    padding: 0 0 0 14px;
    background: transparent;
    white-space: nowrap;
}

.yh-bookmark:hover {
    color: var(--yh-rose);
}

.yh-tools a + a::before {
    margin-right: .65em;
    color: #a998a1;
    content: "/";
}

.yh-search {
    display: flex;
    align-items: center;
    min-width: 0;
    width: 208px;
    gap: .4em;
    padding: 0 9px 0 13px;
    border: 1px solid #666a74;
    border-radius: 99px;
    background: #0b0e14;
}

.yh-search input {
    width: 100%;
    min-width: 0;
    min-height: 24px;
    padding: 0;
    color: var(--yh-ink);
    border: 0;
    background: transparent;
}

.yh-search input::placeholder {
    color: #aaa8b1;
}

.yh-search button,
.yh-mobile-menu-button,
.yh-mobile-search-button {
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
}

.yh-search svg {
    width: 17px;
    height: 17px;
}

.yh-mobile-menu-button,
.yh-mobile-search-button,
.yh-mobile-brand-icon {
    display: none;
}

.yh-hero {
    background: #181923 var(--yh-hero-pc) center 48% / cover no-repeat;
    isolation: isolate;
}

.yh-hero-inner {
    position: relative;
    display: grid;
    place-items: center;
    min-height: clamp(175px, 15.75vw, 290px);
    max-width: 1750px;
    margin-inline: auto;
    overflow: hidden;
    background: radial-gradient(ellipse at center, #0c091532 0%, transparent 53%);
}

.yh-logo {
    display: block;
    width: clamp(310px, 26.2vw, 460px);
    height: auto;
    max-width: 100%;
    filter: drop-shadow(0 4px 8px #000b);
}

.yh-hero-side {
    position: absolute;
    inset: auto 3.15% 18% auto;
    max-width: 25%;
    color: #ffe4ec;
    font: italic 1.1rem/1.6 var(--yh-serif);
    letter-spacing: .23em;
    text-align: center;
    text-shadow: 0 2px 4px black, 0 0 12px #6d1137;
}

.yh-hero-side p {
    margin: 0;
}

.yh-hero-side small {
    display: block;
    margin-top: .6em;
    padding: .65em 1em 0;
    border-top: 1px solid #c582a5;
    font: 400 .6rem/1 Georgia, serif;
    letter-spacing: .4em;
}

.yh-nav {
    --yh-nav-width: min(1145px, 85vw);
    position: relative;
    border-block: 1px solid #82767c;
    box-shadow: 0 2px 5px #000a, inset 0 1px 3px #e9b8c336;
    background:
        repeating-linear-gradient(118deg, #bca0b008 0 1px, transparent 1px 13px),
        linear-gradient(#17191e, #0b0e13 65%, #14171d);
}

.yh-nav-inner {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    width: var(--yh-nav-width);
    margin-inline: auto;
    min-height: 49px;
    border-inline: 1px solid #746c73;
}

.yh-nav-inner a {
    position: relative;
    display: grid;
    place-items: center;
    padding-inline: 7px;
    border-right: 1px solid #6c666e;
    font: 700 clamp(.89rem, 1.04vw, 1.12rem)/1 var(--yh-serif);
    white-space: nowrap;
    letter-spacing: .12em;
}

.yh-nav-inner a:last-child {
    border-right: 0;
}

.yh-nav-inner a:is(:hover, [aria-current="page"], .is-active) {
    color: #ffe2ed;
    background: radial-gradient(ellipse at 50% 119%, #f751a6ad 0%, #76294580 28%, transparent 72%);
    box-shadow: inset 0 -2px 0 #fbb8d4, inset 0 -4px 11px #ce4d8f85;
    text-shadow: 0 0 12px #e14d92;
}

.yh-layout {
    display: grid;
    grid-template-columns: minmax(154px, 16fr) minmax(0, 65fr) minmax(176px, 17fr);
    gap: clamp(10px, 1.02vw, 18px);
    align-items: start;
    max-width: 1750px;
    margin-inline: auto;
    padding: 16px clamp(12px, 1.2vw, 21px) 16px;
}

.yh-main,
.yh-left,
.yh-right {
    display: grid;
    gap: 9px;
    min-width: 0;
}

.yh-panel,
.yh-left,
.yh-right {
    position: relative;
    min-width: 0;
    border: 1px solid var(--yh-line);
    border-radius: 6px;
    background:
        repeating-linear-gradient(132deg, #e5d1df04 0 1px, transparent 1px 11px),
        linear-gradient(155deg, #11161c, #0c1015 85%);
    box-shadow: inset 0 0 0 2px #0009;
}

.yh-left,
.yh-right {
    gap: 6px;
    padding: 7px 6px;
}

.yh-panel::before,
.yh-card::before,
.yh-tile::before,
.yh-left::before,
.yh-right::before,
.yh-forum-frame .yh-nav-inner::after {
    content: "";
    position: absolute;
    inset: 3px;
    z-index: 1;
    border-radius: 3px;
    pointer-events: none;
    background:
        linear-gradient(138deg, var(--yh-frame-corner, #b2a0a2) 0 1px, transparent 2px) top left,
        linear-gradient(222deg, var(--yh-frame-corner, #b2a0a2) 0 1px, transparent 2px) top right,
        linear-gradient(42deg, var(--yh-frame-corner, #b2a0a2) 0 1px, transparent 2px) bottom left,
        linear-gradient(318deg, var(--yh-frame-corner, #b2a0a2) 0 1px, transparent 2px) bottom right;
    background-size: 8px 8px;
    background-repeat: no-repeat;
}

.yh-panel-head {
    min-height: 41px;
    padding: 4px 3.2% 4px 2.15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid #66626c;
    border-radius: 5px 5px 0 0;
    background:
        radial-gradient(ellipse at 14% 100%, #66293d56, transparent 25%),
        linear-gradient(127deg, #20232a, #10151c 67%);
}

.yh-panel-head h2 {
    display: flex;
    align-items: center;
    gap: .7em;
    margin: 0;
    color: #ffe8ef;
    font: 700 clamp(1.05rem, 1.28vw, 1.3rem)/1.25 var(--yh-serif);
    letter-spacing: .15em;
    white-space: nowrap;
}

.yh-panel-head h2::before {
    content: "";
    flex: none;
    width: 1.35em;
    height: 1.45em;
    background: url("/ui-art/ornament.png") center / contain no-repeat;
    mix-blend-mode: screen;
}

.yh-section-note {
    color: var(--yh-muted);
    font-size: clamp(.6rem, 2.02vw, .9rem);
    white-space: nowrap;
}

.yh-more {
    display: inline-flex;
    align-items: center;
    gap: .22em;
    flex-shrink: 0;
    color: var(--yh-muted) !important;
    font-size: .86rem;
    white-space: nowrap;
}

.yh-more:hover {
    color: var(--yh-rose) !important;
}

.yh-more .yh-icon,
.yh-arrow .yh-icon,
.yh-row-arrow .yh-icon {
    width: 1em;
    height: 1em;
}

.yh-news {
    margin: 0;
    padding: 5px clamp(7px, 1.2vw, 20px) 6px;
    list-style: none;
}

.yh-news-row {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) auto;
    align-items: center;
    min-height: 37px;
    gap: clamp(8px, 1.05vw, 17px);
    padding: 3px 2px;
    border-bottom: 1px solid #293440;
}

.yh-news > :last-child,
.yh-news > :last-child .yh-news-row {
    border-bottom: 0;
}

.yh-news-row:hover {
    background: #e8a3ba12;
}

.yh-news-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(.86rem, 1vw, 1rem);
    letter-spacing: .06em;
}

.yh-news-board {
    display: inline-block;
    margin-right: .5em;
    font-weight: 700;
}

.yh-row-arrow {
    display: none;
}

.yh-news time,
.yh-news-row time {
    font: 400 .85rem/1.3 var(--yh-sans);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--yh-muted);
}

.yh-tag {
    min-width: 0;
    text-align: center;
    padding: 2px 3px;
    border: 1px solid var(--yh-tag-border, #d16564);
    border-radius: 4px;
    color: #fff7fb;
    background: linear-gradient(112deg, var(--yh-tag-bg, #78201e), #2d1b24);
    font: 700 .86rem/1.3 var(--yh-serif);
    letter-spacing: .1em;
    white-space: nowrap;
}

.yh-tag[data-tone="purple"] {
    --yh-tag-bg: #482c6e;
    --yh-tag-border: #a17ec9;
}

.yh-tag[data-tone="amber"] {
    --yh-tag-bg: #6a3b2d;
    --yh-tag-border: #b5805e;
}

.yh-tag[data-tone="blue"] {
    --yh-tag-bg: #214f75;
    --yh-tag-border: #6697cb;
}

.yh-tile-grid,
.yh-card-grid {
    display: grid;
    gap: clamp(5px, .7vw, 11px);
    padding: 7px clamp(7px, .8vw, 13px);
}

.yh-tile-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

.yh-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.yh-tile,
.yh-card,
.yh-quick {
    position: relative;
    overflow: hidden;
    border: 1px solid #676069;
    border-radius: 5px;
    background: #151920;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.yh-tile:is(:hover, :focus-visible),
.yh-card:is(:hover, :focus-visible),
.yh-quick:is(:hover, :focus-visible) {
    z-index: 2;
    border-color: #f6a1c3;
    box-shadow: inset 0 0 16px #e45d8f33, 0 0 13px #d13d7542;
}

.yh-tile {
    min-width: 0;
    min-height: clamp(76px, 6.3vw, 113px);
    display: grid;
    align-content: end;
    justify-items: center;
    gap: 3px;
    padding: 3px 1px 5px;
    background:
        linear-gradient(162deg, #171b21e0, #0f1014e0),
        repeating-linear-gradient(118deg, #ffffff20 0 1px, #000 1px 8px);
}

.yh-tile img {
    display: block;
    width: min(84%, 83px);
    height: clamp(42px, 4.55vw, 78px);
    object-fit: contain;
    mix-blend-mode: screen;
}

.yh-tile span {
    font: 700 clamp(.64rem, .88vw, .94rem)/1.15 var(--yh-serif);
    letter-spacing: .08em;
    white-space: nowrap;
}

.yh-card {
    display: flex;
    align-items: center;
    gap: .75em;
    min-height: 81px;
    min-width: 0;
    padding: 8px 12px;
    background:
        linear-gradient(90deg, #14182035, #10131927 45%, #0c0e14a6),
        var(--yh-art, linear-gradient(135deg, #44212d, #1a1c26 65%)) right center / auto 100% no-repeat,
        linear-gradient(135deg, #191b23, #0c0e14);
    box-shadow: inset 0 0 0 2px #000b;
}

.yh-card-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: clamp(37px, 4vw, 62px);
    color: #fac9dc;
    filter: drop-shadow(0 0 7px #e65892a1);
}

.yh-card-icon :is(svg, img) {
    display: block;
    width: 86%;
    height: auto;
}

.yh-card-icon img {
    width: 100%;
    object-fit: contain;
    mix-blend-mode: screen;
}

.yh-card-copy {
    display: grid;
    gap: .18em;
    min-width: 0;
    text-shadow: 0 2px 4px #000, 0 1px 8px #000;
}

.yh-card-copy strong {
    font: 700 clamp(.94rem, 1.15vw, 1.2rem)/1.3 var(--yh-serif);
    letter-spacing: .13em;
    white-space: nowrap;
}

.yh-card-copy small {
    color: #e0d5d9;
    font-size: clamp(.68rem, .84vw, .87rem);
    line-height: 1.35;
}

.yh-arrow {
    flex: none;
    margin-left: auto;
    color: #fff3f8;
    text-shadow: 0 0 6px #000;
}

.yh-card .yh-arrow {
    font: 400 1.4em/.95 var(--yh-sans);
}

.yh-left .yh-card {
    min-height: clamp(76px, 6.05vw, 104px);
    padding: 8px 11px 8px 42%;
    background-image:
        linear-gradient(90deg, #13161a00 15%, #11131a38 40%, #10131ae8 86%),
        var(--yh-art, linear-gradient(135deg, #44212d, #1a1c26 65%)),
        linear-gradient(135deg, #191b23, #0c0e14);
    background-position: center, left center, center;
}

.yh-left .yh-card-icon {
    display: none;
}

.yh-left .yh-card-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 0;
}

.yh-left .yh-card-copy small {
    color: #e4d0d1;
    font-family: Georgia, serif;
    font-size: .59rem;
    letter-spacing: .18em;
}

.yh-left .yh-card-copy strong {
    font-size: clamp(.83rem, 1.15vw, 1.23rem);
}

.yh-right > .yh-panel {
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}

.yh-right .yh-panel-head {
    padding-inline: 9px;
    margin: -5px -4px 6px;
}

.yh-quick-grid {
    display: grid;
    gap: 6px;
    padding-block: 12px 6px;
}

.yh-status {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    min-height: 58px;
    padding: 9px 11px;
    border: 1px solid #484b56;
    border-radius: 9px;
    background: radial-gradient(ellipse at 0 0, #1526217d, transparent 70%), #0e1216;
}

.yh-right .yh-status {
    min-height: 99px;
    padding-inline: 12px;
}

.yh-status-dot {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    border: 1px solid #fff2dc;
    border-radius: 50%;
    background: #dcb989;
    box-shadow: 0 0 9px #edb972a8;
}

.yh-status[data-status="online"] .yh-status-dot {
    border-color: #d3ffed;
    background: #33e894;
    box-shadow: 0 0 12px #42ec93a8;
}

.yh-status strong {
    color: #eed8b5;
    font-size: clamp(.84rem, 1.15vw, 1.12rem);
    letter-spacing: .06em;
    white-space: nowrap;
}

.yh-status[data-status="online"] strong {
    color: #84f3cb;
}

.yh-status small {
    display: block;
    margin-top: 3px;
    color: #ddd4d5;
    font-size: .75rem;
}

.yh-quick {
    display: flex;
    align-items: center;
    gap: .85em;
    min-height: 51px;
    padding: 6px 13px;
    font: 700 clamp(.93rem, 1.09vw, 1.1rem)/1 var(--yh-serif);
    letter-spacing: .12em;
    background: linear-gradient(148deg, #191d24, #0d1117);
    border-color: #424957;
}

.yh-icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 1.45em;
    height: 1.45em;
}

.yh-icon svg {
    width: 100%;
    height: 100%;
}

.yh-quick .yh-icon {
    color: #f4a9d3;
}

.yh-side-art {
    display: grid;
    align-content: center;
    justify-items: center;
    min-height: 190px;
    padding: 17px 10px;
    text-align: center;
    background:
        radial-gradient(ellipse at 50% 67%, #691d3a65, transparent 39%),
        linear-gradient(160deg, #11131a21, transparent 74%, #0a0b0f50),
        url("/ui-art/panel-landscape.png") bottom center / 100% auto no-repeat,
        url("/ui-art/panel-texture.png") top center / 100% auto no-repeat,
        linear-gradient(140deg, #151922, #0a0b0f);
    color: #f1e1e6;
    border: 1px solid #514953;
    border-radius: 5px;
    font: italic 1rem/1.7 var(--yh-serif);
    letter-spacing: .15em;
    text-shadow: 0 2px 5px #000;
}

.yh-side-art small {
    color: #e8bdcf;
    font: 400 .6rem/1.8 Georgia, serif;
    letter-spacing: .25em;
}

.yh-side-art p {
    margin: 0 0 .6em;
}

.yh-footer {
    margin: 0 auto;
    padding: 8px 9px 13px;
    color: #d8c8ce;
    text-align: center;
    font: .7rem/1.5 Georgia, var(--yh-serif);
    letter-spacing: .32em;
}

.yh-footer strong,
.yh-footer small {
    display: block;
    font-weight: 400;
}

.yh-bottom {
    display: none;
}

.yh-dialog {
    width: min(510px, calc(100vw - 30px));
    max-height: min(82vh, 690px);
    padding: 20px;
    color: var(--yh-ink);
    background: linear-gradient(140deg, #22212b, #10131a 72%);
    border: 1px solid #8f6d83;
    border-radius: 8px;
    box-shadow: 0 10px 80px #000c, 0 0 26px #cc4d7e30;
}

.yh-dialog::backdrop {
    background: #060609c9;
    backdrop-filter: blur(3px);
}

.yh-dialog h2 {
    margin: 0 0 .65em;
    color: #ffe1ee;
    font: 700 1.4rem/1.2 var(--yh-serif);
    letter-spacing: .13em;
}

.yh-dialog header {
    display: flex;
    align-items: start;
    justify-content: space-between;
}

.yh-dialog :is(.yh-menu-list, .yh-search-results) {
    list-style: none;
    margin: .75em 0 0;
    padding: 0;
}

.yh-dialog :is(.yh-menu-list, .yh-search-results) a {
    display: block;
    padding: .65em .4em;
    border-bottom: 1px solid #55424d;
}

.yh-dialog :is(.yh-menu-list, .yh-search-results) a:hover {
    background: #ec72a127;
}

.yh-dialog [data-dialog-close] {
    float: right;
    border: 1px solid #8f6d83;
    border-radius: 50%;
    background: #20151e;
    width: 32px;
    height: 32px;
}

.yh-dialog form {
    display: flex;
    gap: 8px;
}

.yh-dialog input {
    width: 100%;
    min-width: 0;
    min-height: 37px;
    padding: 5px 10px;
    color: var(--yh-ink);
    border: 1px solid #8f6d83;
    border-radius: 4px;
    background: #111219;
}

.yh-dialog form button {
    padding: 3px 11px;
    border: 1px solid #8f6d83;
    border-radius: 4px;
    background: #492238;
    white-space: nowrap;
}

.yh-menu {
    display: none;
}

@media (min-width: 901px) {
    .yh-forum-frame {
        --yh-frame-edge: #615961;
        --yh-frame-corner: #c2a9a8;
        --yh-frame-inlay: inset 0 0 0 1px #0a0a0e, inset 0 0 0 2px #82717955;
        --yh-frame-plate:
            linear-gradient(153deg, #20232a4f, #0d1015 78%),
            repeating-linear-gradient(123deg, #bca0b008 0 1px, transparent 1px 12px),
            #14171e;
    }

    .yh-forum-frame .yh-nav {
        border: 0;
        background: linear-gradient(transparent 94%, #59505a 94% 96%, #0a0b0e 96%);
        box-shadow: 0 2px 4px #000b;
    }

    .yh-forum-frame .yh-nav::before,
    .yh-forum-frame .yh-nav::after {
        position: absolute;
        top: -3px;
        bottom: -1px;
        width: calc((100% - var(--yh-nav-width)) / 2 + 4px);
        content: "";
        pointer-events: none;
        background: url("/ui-art/nav-wing.svg") left bottom / 100% 100% no-repeat;
    }

    .yh-forum-frame .yh-nav::before {
        left: 0;
    }

    .yh-forum-frame .yh-nav::after {
        right: 0;
        transform: scaleX(-1);
    }

    .yh-forum-frame :is(.yh-nav-inner, .yh-left, .yh-right, .yh-main > .yh-panel) {
        border: 1px solid var(--yh-frame-edge);
        border-radius: 4px;
        background: var(--yh-frame-plate);
        box-shadow: var(--yh-frame-inlay), 0 2px 5px #0008;
    }

    .yh-forum-frame .yh-nav-inner {
        z-index: 1;
        min-height: 52px;
        padding: 1px 2px;
    }

    .yh-forum-frame .yh-nav-inner::before {
        position: absolute;
        top: -3px;
        left: 50%;
        z-index: 2;
        width: clamp(70px, 5.55vw, 88px);
        aspect-ratio: 88 / 58;
        transform: translate(-50%, -50%);
        content: "";
        pointer-events: none;
        background: url("/ui-art/nav-crest.svg") center / contain no-repeat;
    }

    .yh-forum-frame .yh-nav-inner a {
        border-right-color: var(--yh-frame-edge);
    }

    .yh-forum-frame .yh-main > .yh-panel > .yh-panel-head,
    .yh-forum-frame .yh-main > .yh-panel > .yh-desktop-only .yh-panel-head,
    .yh-forum-frame .yh-right .yh-panel-head {
        border-bottom-color: var(--yh-frame-edge);
        box-shadow: inset 0 1px 0 #82717947;
    }

    .yh-forum-frame :is(.yh-card, .yh-tile, .yh-quick, .yh-side-art) {
        border-color: var(--yh-frame-edge);
        box-shadow: var(--yh-frame-inlay);
    }

    .yh-forum-frame :is(.yh-card, .yh-tile, .yh-quick):is(:hover, :focus-visible) {
        border-color: #f6a1c3;
        box-shadow: var(--yh-frame-inlay), 0 0 13px #d13d7542;
    }
}

@media (max-width: 1100px) and (min-width: 901px) {
    .yh-layout {
        grid-template-columns: minmax(125px, 16fr) minmax(0, 65fr) minmax(152px, 17fr);
    }

    .yh-left .yh-card {
        padding-left: 32%;
    }

    .yh-news-row {
        grid-template-columns: 59px minmax(0, 1fr) auto;
    }
}

@media (max-width: 900px) {
    .yh-site .yh-desktop-only {
        display: none !important;
    }

    .yh-site .yh-mobile-only:not([hidden]) {
        display: revert !important;
    }

    .yh-site :is(.yh-mobile-menu-button, .yh-mobile-search-button).yh-mobile-only:not([hidden]) {
        display: grid !important;
    }

    .yh-site :is(.yh-card, .yh-mobile-login).yh-mobile-only:not([hidden]) {
        display: flex !important;
    }

    .yh-top-inner {
        min-height: clamp(39px, 7.55vw, 68px);
        gap: .85em;
        padding: 0 clamp(11px, 3.1vw, 24px);
        font-size: clamp(.79rem, 2.1vw, 1rem);
    }

    .yh-top-inner > .yh-brand {
        order: -2;
        display: flex;
        align-items: center;
        gap: .5em;
        font: 700 clamp(1rem, 3.75vw, 1.8rem)/1 var(--yh-serif);
        letter-spacing: .15em;
    }

    .yh-mobile-menu-button {
        display: grid;
        order: -3;
    }

    .yh-mobile-search-button {
        display: grid;
        margin-left: auto;
    }

    .yh-top-inner .yh-mobile-brand-icon {
        width: 1.5em;
        height: 1.5em;
        filter: drop-shadow(0 0 8px #f45a91);
        object-fit: contain;
    }

    .yh-mobile-login {
        align-items: center;
        gap: .35em;
        padding-left: .65em;
        border-left: 1px solid #77717b;
        white-space: nowrap;
    }

    :is(.yh-mobile-menu-button, .yh-mobile-search-button) svg {
        width: clamp(22px, 4.4vw, 34px);
        height: clamp(22px, 4.4vw, 34px);
    }

    .yh-top-inner .yh-tools {
        margin-left: 0;
        border-left: 1px solid #77717b;
        padding-left: .7em;
    }

    .yh-top-inner .yh-search,
    .yh-nav {
        display: none;
    }

    .yh-menu:not([hidden]) {
        position: absolute;
        z-index: 6;
        inset: 100% 0 auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 80vh;
        overflow: auto;
        padding: 5px 11px 10px;
        color: var(--yh-ink);
        background: #16131a;
        box-shadow: 0 8px 19px #000c;
    }

    .yh-menu a {
        padding: 9px 6px;
        border-bottom: 1px solid #635660;
        font-size: .9rem;
    }

    .yh-hero {
        background-image: var(--yh-hero-mobile);
        background-position: center center;
    }

    .yh-hero-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        min-height: clamp(209px, 53.1vw, 480px);
        padding: clamp(5px, 1.6vw, 14px) 4.5vw clamp(13px, 3.1vw, 24px);
        background: radial-gradient(ellipse at 50% 43%, #1109163b 0%, transparent 71%);
    }

    .yh-logo {
        width: clamp(172px, 38.5vw, 348px);
        max-width: 100%;
        margin-top: -.55em;
        margin-bottom: -3.2%;
        clip-path: inset(0 0 18% 0);
    }

    .yh-hero-copy {
        text-align: center;
        text-shadow: 0 2px 5px #000, 0 0 14px #13050d;
    }

    .yh-hero-copy h1 {
        margin: -.05em 0 .15em;
        color: #ffe0e9;
        font: 700 clamp(1.15rem, 4.1vw, 2.1rem)/1.15 var(--yh-serif);
        letter-spacing: .31em;
        text-indent: .31em;
    }

    .yh-hero-copy p {
        margin: 0;
        font: 400 clamp(.61rem, 2.05vw, 1rem)/1.3 var(--yh-serif);
        letter-spacing: .18em;
    }

    .yh-hero-motto {
        position: absolute;
        top: 57%;
        max-width: 25%;
        margin: 0;
        color: #ffe0e9;
        font: italic clamp(.55rem, 2.3vw, 1.1rem)/1.5 var(--yh-serif);
        letter-spacing: .1em;
        text-align: center;
        text-shadow: 0 2px 5px #000, 0 0 8px #350914;
    }

    .yh-hero-motto-left {
        left: 4%;
    }

    .yh-hero-motto-right {
        right: 4%;
    }

    .yh-site .yh-enter:not([hidden]) {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: clamp(156px, 37vw, 327px);
        min-height: clamp(39px, 8.3vw, 74px);
        padding: .45em .8em;
        margin-top: auto;
        border: 1px solid #d59ca8;
        outline: 1px solid #704357;
        outline-offset: 3px;
        border-radius: 22px 6px;
        background: radial-gradient(ellipse at center 112%, #8b2247, #310c1b 46%, #190b13 80%);
        box-shadow: 0 0 14px #e62b777b, inset 0 0 0 3px #170d17;
        color: #fff0ee;
        font: 700 clamp(.95rem, 3.5vw, 1.5rem)/1.15 var(--yh-serif);
        letter-spacing: .13em;
        text-shadow: 0 1px 6px #330213;
    }

    .yh-layout {
        display: block;
        padding: 6px clamp(10px, 3.15vw, 26px) 0;
    }

    .yh-portals {
        scroll-margin-top: 12px;
    }

    .yh-left,
    .yh-right {
        display: none;
    }

    .yh-main {
        gap: clamp(10px, 2.25vw, 18px);
    }

    .yh-panel {
        border: 0;
        box-shadow: none;
        background: transparent;
    }

    .yh-panel::before {
        display: none;
    }

    .yh-panel-head {
        min-height: clamp(27px, 5.35vw, 45px);
        padding: 0 0 4px;
        gap: 7px;
        border: 0;
        background: transparent;
    }

    .yh-panel-head h2 {
        gap: .43em;
        font-size: clamp(.98rem, 3.45vw, 1.58rem);
    }

    .yh-panel-head::after {
        content: "";
        order: 1;
        flex: 1;
        border-top: 1px solid #a9848a9e;
    }

    .yh-panel-head > :not(h2) {
        order: 2;
    }

    .yh-more {
        font-size: clamp(.64rem, 2.18vw, .97rem);
    }

    .yh-news-panel {
        padding: 3px 5px 6px;
        border: 1px solid #ac8f90;
        border-radius: 5px;
        color: #241820;
        background: #cdb9bb url("/ui-art/news-parchment.png") center / cover;
        box-shadow: inset 0 0 0 2px #4f3f41, inset 0 0 10px #25131777;
    }

    .yh-news-panel .yh-panel-head {
        padding: 3px 5px 5px;
    }

    .yh-news-panel .yh-panel-head h2,
    .yh-news-panel .yh-more {
        color: #411d2b !important;
        text-shadow: none;
    }

    .yh-home .yh-news {
        padding: 0;
        border-radius: 5px;
        overflow: hidden;
        background: #28252ce8;
        color: #f7edef;
    }

    .yh-news-row {
        grid-template-columns: clamp(37px, 8.25vw, 64px) minmax(0, 1fr) auto 1em;
        min-height: clamp(25px, 5.75vw, 51px);
        gap: clamp(5px, 1.15vw, 10px);
        padding: 2px 6px;
        border-color: #776a70;
    }

    .yh-news-title {
        font-size: clamp(.63rem, 2.18vw, 1rem);
        letter-spacing: .035em;
    }

    .yh-news-board {
        display: none;
    }

    .yh-row-arrow {
        display: grid;
        place-items: center;
    }

    .yh-news-row time {
        font-size: clamp(.59rem, 1.95vw, .94rem);
    }

    .yh-tag {
        font-size: clamp(.64rem, 2vw, .92rem);
        letter-spacing: .05em;
    }

    .yh-home .yh-news > :nth-child(n+4) {
        display: none;
    }

    .yh-card-grid,
    .yh-tile-grid {
        gap: clamp(5px, 1.45vw, 13px);
        padding: 0;
    }

    .yh-tile-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .yh-landing .yh-tile-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .yh-tile {
        min-height: clamp(58px, 13.8vw, 108px);
        padding: 2px 1px 4px;
    }

    .yh-tile img {
        width: 93%;
        height: clamp(34px, 9.2vw, 69px);
    }

    .yh-tile span {
        font-size: clamp(.58rem, 1.95vw, .9rem);
        letter-spacing: 0;
    }

    .yh-card {
        min-height: clamp(54px, 12.5vw, 101px);
        gap: clamp(3px, 1.4vw, 12px);
        padding: 4px 5px;
        background-image:
            linear-gradient(90deg, #12131b63, #101219bc 31%, #10121935 100%),
            var(--yh-art, linear-gradient(135deg, #44212d, #1a1c26 65%)),
            linear-gradient(135deg, #191b23, #0c0e14);
    }

    .yh-card-icon {
        width: clamp(32px, 9.8vw, 76px);
    }

    .yh-card-copy strong {
        font-size: clamp(.83rem, 2.88vw, 1.34rem);
        letter-spacing: .12em;
    }

    .yh-card-copy small {
        font-size: clamp(.56rem, 1.84vw, .92rem);
    }

    .yh-card .yh-arrow {
        display: grid;
        place-items: center;
        border: 1px solid #b9a6b2b5;
        border-radius: 50%;
        background: #08070bc9;
        min-width: clamp(15px, 3.9vw, 28px);
        height: clamp(15px, 3.9vw, 28px);
        font-size: 1em;
    }

    .yh-card .yh-arrow .yh-icon {
        width: .85em;
        height: .85em;
    }

    .yh-footer {
        margin-bottom: calc(clamp(62px, 12.5vw, 98px) + env(safe-area-inset-bottom, 0px));
        padding-top: 9px;
        padding-bottom: 7px;
        letter-spacing: .2em;
    }

    .yh-site .yh-bottom:not([hidden]) {
        position: fixed;
        inset: auto 0 0;
        z-index: 5;
        display: grid !important;
        grid-template-columns: repeat(5, 1fr);
        gap: 2px;
        min-height: clamp(62px, 12.5vw, 98px);
        padding: 5px 3vw calc(7px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid #837780;
        background:
            repeating-linear-gradient(126deg, #ffffff04 0 1px, transparent 1px 8px),
            linear-gradient(#11141af7, #090c12fc);
        box-shadow: 0 -5px 13px #0007;
    }

    .yh-bottom a {
        display: grid;
        justify-items: center;
        align-content: center;
        gap: 1px;
        color: #f0e6ec;
        font: 700 clamp(.68rem, 2.65vw, 1.13rem)/1.15 var(--yh-serif);
        letter-spacing: .08em;
    }

    .yh-bottom .yh-icon {
        width: clamp(19px, 4.6vw, 34px);
        height: clamp(19px, 4.6vw, 34px);
        color: #bfc5db;
    }

    .yh-bottom a:is([aria-current="page"], .is-active) .yh-icon,
    .yh-bottom a:is([aria-current="page"], .is-active) {
        color: #ffadcb;
        filter: drop-shadow(0 0 6px #e13a80);
    }

    .yh-bottom .yh-compose .yh-icon {
        width: clamp(29px, 6.5vw, 52px);
        height: clamp(29px, 6.5vw, 52px);
        padding: 3px;
        color: #fff5fb;
        border: 1px solid #fbaacb;
        border-radius: 50%;
        background: radial-gradient(ellipse, #9e355e, #301123 65%);
        box-shadow: 0 0 9px #ee5d99c8, inset 0 0 5px #ef8db4;
    }
}

@media (prefers-reduced-motion: reduce) {
    .yh-site *,
    .yh-site *::before,
    .yh-site *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}