/*
 * Gamelify Campus
 * A lightweight, shared-hosting friendly 2.5D campus layer for the existing LMS.
 */

:root {
    --gf-violet: #7c5cff;
    --gf-violet-deep: #4934bd;
    --gf-cyan: #25c6da;
    --gf-coral: #ff6f91;
    --gf-gold: #ffc857;
    --gf-ink: #151b38;
    --gf-panel: rgba(15, 20, 48, 0.88);
    --gf-panel-solid: #161c3d;
    --gf-panel-soft: rgba(255, 255, 255, 0.09);
    --gf-line: rgba(198, 190, 255, 0.24);
    --gf-text: #f8f8ff;
    --gf-muted: #c7c9e1;
    --gf-campus-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.gf-campus-page {
    background: #0b0f25;
}

.gf-campus-page .main_wrapper {
    min-height: 100vh;
}

.gf-campus-shell,
.gf-campus-directory {
    width: min(1540px, calc(100% - 32px));
    margin-inline: auto;
    padding-block: clamp(24px, 4vw, 58px) 72px;
}

.gf-campus-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
    color: var(--gf-muted);
    font-size: 0.82rem;
    font-weight: 750;
}

.gf-campus-breadcrumbs a {
    color: #dcd8ff;
}

.gf-campus-breadcrumbs i {
    color: var(--gf-cyan);
}

[dir="rtl"] .gf-campus-breadcrumbs i,
[dir="rtl"] .gf-campus-card__arrow i {
    display: inline-block;
    transform: scaleX(-1);
}

.gf-campus-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: clamp(24px, 4vw, 44px);
}

.gf-campus-heading__copy {
    max-width: 760px;
}

.gf-campus-heading h1 {
    margin: 8px 0 12px;
    color: #fff;
    font-size: clamp(2.2rem, 5vw, 5rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

[dir="rtl"] .gf-campus-heading h1 {
    letter-spacing: 0;
}

.gf-campus-heading p {
    max-width: 680px;
    margin: 0;
    color: var(--gf-muted);
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.75;
}

.gf-campus-heading__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.gf-campus-heading .alpha-button {
    white-space: nowrap;
}

/* Campus directory ------------------------------------------------------- */

.gf-domain-strip {
    margin-bottom: 26px;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 2px 10px;
    scrollbar-width: thin;
}

.gf-domain-chip {
    min-height: 40px;
    padding: 9px 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--gf-line);
    border-radius: 999px;
    color: #e7e5ff;
    background: rgba(255, 255, 255, 0.07);
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
    backdrop-filter: blur(12px);
}

.gf-domain-chip.is-active,
.gf-domain-chip:hover {
    color: #fff;
    border-color: rgba(86, 220, 232, 0.5);
    background: linear-gradient(135deg, rgba(124, 92, 255, 0.4), rgba(37, 198, 218, 0.24));
}

.gf-campus-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 26px);
}

.gf-campus-collection + .gf-campus-collection {
    margin-top: clamp(40px, 7vw, 84px);
}

.gf-campus-collection__header {
    margin-bottom: 20px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
}

.gf-campus-collection__header > div > span {
    color: var(--gf-cyan);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

[dir="rtl"] .gf-campus-collection__header > div > span {
    letter-spacing: 0;
}

.gf-campus-collection__header h2 {
    margin: 5px 0 0;
    color: #fff;
    font-size: clamp(1.6rem, 3vw, 2.65rem);
}

.gf-campus-collection__header p {
    max-width: 520px;
    margin: 0;
    color: var(--gf-muted);
    line-height: 1.65;
}

.gf-campus-grid--domains {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gf-campus-grid--communities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gf-campus-card--domain {
    min-height: 360px;
}

.gf-campus-card--community {
    min-height: 390px;
}

.gf-campus-card--community::after {
    background:
        radial-gradient(circle at 25% 100%, rgba(37, 211, 231, 0.25), transparent 58%),
        radial-gradient(circle at 90% 40%, rgba(236, 72, 153, 0.16), transparent 48%);
}

[data-gf-campus-card][hidden] {
    display: none !important;
}

.gf-campus-card {
    position: relative;
    min-height: 410px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: end;
    border: 1px solid rgba(205, 198, 255, 0.2);
    border-radius: 30px;
    color: #fff;
    background: #171d43;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
    isolation: isolate;
    transition: transform 280ms var(--gf-campus-ease), border-color 280ms ease, box-shadow 280ms ease;
}

.gf-campus-card:hover {
    color: #fff;
    border-color: rgba(85, 223, 236, 0.55);
    box-shadow: 0 34px 86px rgba(48, 33, 145, 0.38);
    transform: translateY(-8px);
}

.gf-campus-card__image,
.gf-campus-card::before,
.gf-campus-card::after {
    position: absolute;
    inset: 0;
}

.gf-campus-card__image {
    z-index: -3;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms var(--gf-campus-ease), filter 300ms ease;
}

.gf-campus-card:hover .gf-campus-card__image {
    transform: scale(1.055);
}

.gf-campus-card::before {
    content: "";
    z-index: -2;
    background:
        linear-gradient(180deg, rgba(8, 11, 30, 0.05) 20%, rgba(8, 11, 30, 0.88) 75%, rgba(8, 11, 30, 0.98)),
        linear-gradient(120deg, rgba(92, 66, 229, 0.18), rgba(16, 175, 194, 0.12));
}

.gf-campus-card::after {
    content: "";
    z-index: -1;
    inset: auto 0 0;
    height: 52%;
    background: radial-gradient(circle at 30% 100%, rgba(124, 92, 255, 0.22), transparent 62%);
}

.gf-campus-card__content {
    padding: 26px;
}

.gf-campus-card__topline,
.gf-campus-card__stats,
.gf-campus-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.gf-campus-card__domain {
    max-width: 70%;
    overflow: hidden;
    color: #d4d0ff;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

[dir="rtl"] .gf-campus-card__domain {
    letter-spacing: 0;
}

.gf-campus-card__live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #aef6dc;
    font-size: 0.72rem;
    font-weight: 800;
}

.gf-campus-card__live::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #42d8a2;
    box-shadow: 0 0 0 5px rgba(66, 216, 162, 0.14);
}

.gf-campus-card__live--pending {
    color: #fde68a;
}

.gf-campus-card__live--pending::before {
    background: #f5b942;
    box-shadow: 0 0 0 5px rgba(245, 185, 66, 0.14);
}

.gf-campus-card h2 {
    margin: 12px 0 10px;
    color: #fff;
    font-size: clamp(1.45rem, 2vw, 2.05rem);
    line-height: 1.12;
}

.gf-campus-card p {
    display: -webkit-box;
    min-height: 48px;
    margin: 0 0 18px;
    overflow: hidden;
    color: #c6c8dc;
    font-size: 0.9rem;
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.gf-campus-card__presence {
    margin: 0 0 14px;
    padding: 7px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    border: 1px solid rgba(141, 222, 255, 0.16);
    border-radius: 18px;
    background: rgba(7, 12, 34, 0.56);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
}

.gf-live-count {
    min-width: 0;
    padding: 8px 9px;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    border-radius: 12px;
    color: #f4f7ff;
    background: rgba(64, 204, 233, 0.1);
}

.gf-live-count i {
    color: #68dcf4;
    font-size: 0.88rem;
}

.gf-live-count strong {
    color: #fff;
    font-size: 1rem;
    line-height: 1;
}

.gf-live-count small {
    overflow: hidden;
    color: #c9d7e9;
    font-size: 0.64rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gf-live-count--teachers {
    background: rgba(255, 193, 92, 0.1);
}

.gf-live-count--teachers i {
    color: #ffd27c;
}

.gf-campus-card__stats {
    justify-content: flex-start;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.gf-campus-card__stat {
    padding: 7px 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: #e7e7f8;
    background: rgba(255, 255, 255, 0.07);
    font-size: 0.72rem;
    font-weight: 750;
}

.gf-campus-card__enter {
    border: 0;
    color: #fff;
    background: transparent;
    font: inherit;
    font-weight: 850;
    cursor: pointer;
}

.gf-campus-card__footer--actions {
    align-items: center;
    min-height: 42px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.gf-campus-card__footer--actions form {
    margin: 0;
}

.gf-campus-card__membership {
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: #cbd1e9;
    background: rgba(255, 255, 255, 0.06);
    font: inherit;
    font-size: 0.68rem;
    font-weight: 800;
    cursor: pointer;
}

.gf-campus-card__membership.is-pending {
    border-color: rgba(245, 185, 66, 0.3);
    color: #fde68a;
    background: rgba(245, 185, 66, 0.08);
}

.gf-campus-card__arrow {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gf-violet), var(--gf-cyan));
    box-shadow: 0 12px 28px rgba(72, 211, 225, 0.24);
}

/* Campus stage ----------------------------------------------------------- */

.gf-campus-topbar {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.gf-campus-title-block {
    min-width: 0;
}

.gf-campus-title-block h1 {
    margin: 5px 0 0;
    overflow: hidden;
    color: #fff;
    font-size: clamp(1.55rem, 3vw, 2.85rem);
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gf-campus-title-block p {
    margin: 7px 0 0;
    color: var(--gf-muted);
    font-size: 0.86rem;
}

.gf-campus-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.gf-campus-tool {
    min-height: 42px;
    padding: 9px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--gf-line);
    border-radius: 999px;
    color: #f7f6ff;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.78rem;
    font-weight: 800;
    backdrop-filter: blur(14px);
}

.gf-campus-tool:hover,
.gf-campus-tool.is-active {
    color: #fff;
    border-color: rgba(87, 222, 235, 0.52);
    background: linear-gradient(135deg, rgba(124, 92, 255, 0.42), rgba(37, 198, 218, 0.25));
}

.gf-campus-stage-shell {
    position: relative;
    border: 1px solid rgba(209, 204, 255, 0.24);
    border-radius: clamp(22px, 3vw, 38px);
    box-shadow: 0 38px 100px rgba(0, 0, 0, 0.44), 0 0 0 1px rgba(120, 95, 255, 0.08) inset;
    isolation: isolate;
    font-family: var(--gf-campus-font, inherit);
}

.gf-campus-stage {
    position: relative;
    width: 100%;
    min-height: min(76vh, 900px);
    aspect-ratio: 1659 / 948;
    overflow: hidden;
    border-radius: inherit;
    background-color: #151939;
    background-image:
        linear-gradient(180deg, rgba(7, 10, 28, 0.04), rgba(7, 10, 28, 0.1) 55%, rgba(7, 10, 28, 0.32)),
        url("../images/gamelify/campus-grand-hall.jpg");
    background-position: center;
    background-size: cover;
    cursor: crosshair;
    touch-action: manipulation;
    font-family: var(--gf-campus-font, inherit);
}

.gf-campus-stage-shell:fullscreen,
.gf-campus-stage-shell:-webkit-full-screen,
.gf-campus-stage-shell.is-campus-fullscreen-fallback {
    width: 100vw;
    height: 100vh;
    max-width: none;
    border: 0;
    border-radius: 0;
    background: #070a1c;
}

.gf-campus-stage-shell.is-campus-fullscreen-fallback {
    position: fixed;
    inset: 0;
    z-index: 1400;
}

.gf-campus-stage-shell:fullscreen .gf-campus-stage,
.gf-campus-stage-shell:-webkit-full-screen .gf-campus-stage,
.gf-campus-stage-shell.is-campus-fullscreen-fallback .gf-campus-stage {
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    border-radius: 0;
}

body.gf-campus-fullscreen-fallback {
    overflow: hidden;
}

.gf-campus-hud {
    position: absolute;
    inset: 18px 18px auto auto;
    z-index: 195;
    display: flex;
    align-items: stretch;
    gap: 8px;
    direction: ltr;
}

.gf-campus-server-clock,
.gf-campus-fullscreen {
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    background: rgba(8, 12, 38, 0.84);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(16px) saturate(130%);
}

.gf-campus-server-clock {
    min-width: 126px;
    min-height: 48px;
    padding: 7px 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: 15px;
}

.gf-campus-server-clock > i {
    color: #6ee7f2;
    font-size: 1.25rem;
}

.gf-campus-server-clock span,
.gf-campus-server-clock small,
.gf-campus-server-clock strong {
    display: block;
}

.gf-campus-server-clock small {
    color: #abb7dc;
    font-size: 0.57rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1;
    text-transform: uppercase;
}

.gf-campus-server-clock strong {
    margin-top: 3px;
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.gf-campus-fullscreen {
    width: 48px;
    border-radius: 15px;
    font-size: 1.15rem;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.gf-campus-fullscreen:hover,
.gf-campus-fullscreen:focus-visible {
    border-color: rgba(110, 231, 242, 0.65);
    background: rgba(35, 56, 102, 0.94);
    transform: translateY(-1px);
}

.gf-campus-soundtrack[aria-pressed="false"] {
    color: #9aa6c7;
    background: rgba(8, 12, 38, 0.7);
}

/* Correct / Wrong live campus event ------------------------------------ */

.gf-event-countdown,
.gf-event-teleport {
    position: absolute;
    z-index: 170;
}

.gf-event-room {
    position: absolute;
    inset: 24% 5.5% auto auto;
    z-index: 92;
    width: min(260px, 31vw);
    padding: 0;
    display: grid;
    justify-items: center;
    gap: 8px;
    border: 0;
    color: #fff;
    background: transparent;
    font: inherit;
    text-align: center;
    cursor: pointer;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.38));
    animation: gf-event-room-arrive 600ms var(--gf-campus-ease) both;
}

.gf-event-room[hidden],
.gf-event-teleport[hidden] {
    display: none !important;
}

.gf-event-room__portal {
    position: relative;
    width: clamp(78px, 8vw, 118px);
    aspect-ratio: 0.78;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 3px solid rgba(187, 247, 255, 0.88);
    border-radius: 50% 50% 18px 18px;
    color: #fff;
    background:
        radial-gradient(circle at 50% 43%, rgba(255, 255, 255, 0.72), transparent 12%),
        radial-gradient(circle, rgba(124, 92, 255, 0.92), rgba(26, 206, 221, 0.58) 50%, rgba(9, 13, 47, 0.96) 73%);
    box-shadow: 0 0 0 7px rgba(83, 221, 232, 0.1), 0 0 42px rgba(92, 225, 241, 0.52), inset 0 0 28px rgba(255, 255, 255, 0.34);
    transition: transform 180ms var(--gf-campus-ease), filter 180ms ease;
}

.gf-event-room__portal::before,
.gf-event-room__portal::after,
.gf-event-room__portal > span {
    content: "";
    position: absolute;
    inset: 13%;
    border: 2px solid rgba(255, 255, 255, 0.62);
    border-radius: 50%;
    animation: gf-event-portal-spin 4s linear infinite;
}

.gf-event-room__portal::after {
    inset: 24%;
    border-color: rgba(255, 224, 130, 0.82);
    animation-direction: reverse;
    animation-duration: 2.8s;
}

.gf-event-room__portal > span {
    inset: -10%;
    border-color: rgba(97, 235, 241, 0.34);
    animation-duration: 5.5s;
}

.gf-event-room__portal > i {
    position: relative;
    z-index: 2;
    font-size: clamp(1.6rem, 3vw, 2.6rem);
    text-shadow: 0 0 18px #fff;
}

.gf-event-room:hover .gf-event-room__portal,
.gf-event-room:focus-visible .gf-event-room__portal {
    filter: brightness(1.18) saturate(1.12);
    transform: translateY(-5px) scale(1.04);
}

.gf-event-room__copy {
    max-width: 100%;
    padding: 9px 13px;
    display: grid;
    gap: 2px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 15px;
    background: rgba(8, 12, 38, 0.88);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(14px);
}

.gf-event-room__copy small {
    color: #8ff3fa;
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gf-event-room__copy strong {
    overflow: hidden;
    color: #fff;
    font-size: 0.85rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gf-event-room__copy > span {
    color: #dce3ff;
    font-size: 0.62rem;
}

.gf-event-countdown {
    inset: 24px 50% auto auto;
    min-width: min(560px, calc(100% - 32px));
    padding: 18px 28px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 85% 15%, rgba(33, 212, 232, 0.28), transparent 45%),
        linear-gradient(135deg, rgba(67, 42, 171, 0.96), rgba(15, 23, 65, 0.96));
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.4), 0 0 42px rgba(124, 92, 255, 0.24);
    text-align: center;
    transform: translateX(50%);
    pointer-events: none;
    animation: gf-event-countdown-in 420ms var(--gf-campus-ease) both;
}

.gf-event-countdown[hidden],
.gf-event-intro-video[hidden],
.gf-event-arena[hidden] {
    display: none !important;
}

.gf-event-intro-video {
    position: absolute;
    z-index: 171;
    inset: 118px auto auto 50%;
    width: min(620px, calc(100% - 32px));
    padding: 12px;
    border: 1px solid rgba(103, 232, 249, .55);
    border-radius: 20px;
    color: #fff;
    background: rgba(4, 8, 28, .94);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
    pointer-events: auto;
    transform: translateX(-50%);
    backdrop-filter: blur(16px);
}

.gf-event-intro-video video {
    width: 100%;
    max-height: 32vh;
    display: block;
    border-radius: 13px;
    background: #000;
    object-fit: contain;
}

.gf-event-intro-video a {
    margin-top: 8px;
    display: inline-flex;
    color: #9af5ff;
    font-size: .76rem;
    font-weight: 800;
}

.gf-event-countdown__kicker {
    display: block;
    margin-bottom: 3px;
    color: #9af5ff;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.gf-event-countdown > strong {
    display: inline-block;
    color: #fff;
    font-size: clamp(1.2rem, 2.4vw, 2rem);
    font-weight: 950;
}

.gf-event-countdown__number {
    min-width: 1.35em;
    display: inline-block;
    margin-inline-start: 0.35em;
    color: #fde68a;
    font-size: clamp(2rem, 4vw, 3.8rem);
    font-weight: 950;
    line-height: 0.85;
    text-shadow: 0 0 28px rgba(253, 230, 138, 0.35);
}

.gf-event-countdown.is-ticking .gf-event-countdown__number {
    animation: gf-event-number-tick 360ms var(--gf-campus-ease);
}

.gf-event-teleport {
    inset: 0;
    z-index: 205;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #fff;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.94), rgba(89, 215, 240, 0.72) 17%, rgba(92, 62, 226, 0.7) 35%, rgba(5, 8, 31, 0.96) 72%);
    animation: gf-event-teleport-flash 850ms var(--gf-campus-ease) both;
}

.gf-event-teleport > i {
    position: relative;
    z-index: 2;
    font-size: clamp(3rem, 9vw, 8rem);
    text-shadow: 0 0 45px #fff;
    animation: gf-event-teleport-icon 760ms var(--gf-campus-ease) both;
}

.gf-event-teleport__ring {
    position: absolute;
    width: min(54vw, 620px);
    aspect-ratio: 1;
    border: clamp(4px, 0.7vw, 9px) solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    box-shadow: 0 0 50px rgba(120, 238, 255, 0.9), inset 0 0 50px rgba(124, 92, 255, 0.55);
    animation: gf-event-teleport-ring 780ms var(--gf-campus-ease) both;
}

.gf-event-teleport__ring:nth-child(2) {
    animation-delay: 90ms;
}

.gf-event-arena {
    inset: 0;
    position: absolute;
    direction: ltr;
    pointer-events: none;
}

.gf-campus-stage.is-event-live::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(4, 7, 24, 0.18), transparent 30%, rgba(4, 7, 24, 0.08)),
        radial-gradient(ellipse at 22% 74%, rgba(255, 68, 72, 0.15), transparent 27%),
        radial-gradient(ellipse at 78% 74%, rgba(32, 224, 145, 0.15), transparent 27%);
    animation: gf-event-map-wash-in 500ms ease both;
}

.gf-campus-stage.is-event-live .gf-room-door,
.gf-campus-stage.is-event-live .gf-event-room,
.gf-campus-stage.is-event-live .gf-campus-floor-hint {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.gf-event-round {
    position: absolute;
    inset: clamp(70px, 8vw, 92px) 50% auto auto;
    z-index: 155;
    width: min(720px, calc(100% - 300px));
    min-width: 0;
    padding: clamp(14px, 2vw, 22px) clamp(18px, 3vw, 32px);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 24px;
    color: #fff;
    text-align: center;
    direction: ltr;
    background:
        radial-gradient(circle at 12% 0, rgba(103, 232, 249, 0.16), transparent 36%),
        rgba(6, 10, 35, 0.86);
    box-shadow: 0 22px 65px rgba(0, 0, 0, 0.4), 0 0 38px rgba(88, 82, 232, 0.12);
    pointer-events: none;
    transform: translateX(50%);
    backdrop-filter: blur(18px) saturate(130%);
    animation: gf-event-question-in 420ms var(--gf-campus-ease) both;
}

[dir='rtl'] .gf-event-round,
[dir='rtl'] .gf-event-leaderboard {
    direction: rtl;
}

.gf-event-round__meta,
.gf-event-round__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.gf-event-round__eyebrow {
    color: #9af5ff;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.gf-event-round h2 {
    margin: 10px 0;
    color: #fff;
    font-size: clamp(1.12rem, 2.35vw, 2rem);
    font-weight: 950;
    line-height: 1.25;
}

.gf-event-round p {
    min-width: 0;
    margin: 0;
    color: #c8d2ef;
    font-size: clamp(0.7rem, 1.1vw, 0.86rem);
    line-height: 1.4;
    text-align: start;
}

.gf-event-score {
    flex: none;
    padding: 6px 10px;
    display: inline-flex;
    gap: 0.45rem;
    border: 1px solid rgba(253, 230, 138, 0.3);
    border-radius: 999px;
    color: #fde68a;
    background: rgba(253, 230, 138, 0.09);
    font-size: 0.72rem;
}

.gf-event-timer {
    --gf-event-time: 100%;
    flex: none;
    width: 42px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 4px solid transparent;
    border-radius: 50%;
    color: #fff;
    background:
        linear-gradient(rgba(8, 13, 42, 0.96), rgba(8, 13, 42, 0.96)) padding-box,
        conic-gradient(#67e8f9 var(--gf-event-time), rgba(255, 255, 255, 0.11) 0) border-box;
    box-shadow: 0 0 22px rgba(33, 212, 232, 0.2);
    font-size: 0.9rem;
    font-weight: 950;
}

.gf-event-vote-zone {
    --gf-vote-color: 255, 68, 72;
    position: absolute;
    left: 22%;
    top: 58%;
    z-index: 44;
    width: clamp(230px, 32vw, 520px);
    aspect-ratio: 1;
    border: 0;
    color: #fff;
    background: transparent;
    font: inherit;
    cursor: pointer;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.gf-event-vote-zone[hidden] { display: none !important; }
.gf-event-vote-zone--1 { --gf-vote-color: 255, 92, 105; }
.gf-event-vote-zone--2 { --gf-vote-color: 46, 213, 167; }
.gf-event-vote-zone--3 { --gf-vote-color: 250, 190, 65; }
.gf-event-vote-zone--4 { --gf-vote-color: 116, 123, 255; }
.gf-event-vote-zone--5 { --gf-vote-color: 244, 114, 182; }
.gf-event-vote-zone--6 { --gf-vote-color: 34, 211, 238; }
.gf-event-vote-zone--7 { --gf-vote-color: 251, 146, 60; }
.gf-event-vote-zone--8 { --gf-vote-color: 196, 181, 253; }

.gf-event-vote-zone--correct {
    --gf-vote-color: 32, 224, 145;
    left: 78%;
}

.gf-event-vote-zone__floor {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--gf-vote-color), 0.24), rgba(var(--gf-vote-color), 0.07) 48%, transparent 70%);
    filter: drop-shadow(0 0 18px rgba(var(--gf-vote-color), 0.46));
    pointer-events: auto;
    transform: perspective(560px) rotateX(62deg);
    transition: filter 220ms ease, transform 220ms var(--gf-campus-ease);
}

.gf-event-vote-zone--wrong .gf-event-vote-zone__floor {
    background:
        radial-gradient(circle, rgba(255, 196, 61, 0.24), rgba(255, 62, 24, 0.08) 50%, transparent 71%),
        conic-gradient(from 18deg, transparent, rgba(255, 112, 30, 0.14), transparent 18%, rgba(255, 206, 74, 0.11), transparent 38%, rgba(255, 75, 26, 0.16), transparent 60%);
}

.gf-event-vote-zone--correct .gf-event-vote-zone__floor {
    background:
        repeating-conic-gradient(from 12deg, transparent 0 8deg, rgba(207, 249, 255, 0.1) 9deg 10deg, transparent 11deg 23deg),
        radial-gradient(circle, rgba(218, 252, 255, 0.25), rgba(51, 207, 247, 0.08) 50%, transparent 71%);
}

.gf-event-vote-zone svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.gf-event-vote-zone circle {
    fill: none;
    vector-effect: non-scaling-stroke;
    transform-origin: center;
}

.gf-event-vote-zone__track {
    stroke: rgba(var(--gf-vote-color), 0.2);
    stroke-width: 14;
}

.gf-event-vote-zone__draw {
    stroke: rgb(var(--gf-vote-color));
    stroke-width: 7;
    stroke-linecap: round;
    stroke-dasharray: 572;
    stroke-dashoffset: 572;
    animation: gf-event-circle-draw 850ms var(--gf-campus-ease) forwards;
}

.gf-event-vote-zone__pulse {
    stroke: rgba(var(--gf-vote-color), 0.55);
    stroke-width: 3;
    animation: gf-event-circle-pulse 1.8s ease-in-out infinite;
}

.gf-event-vote-zone__effects {
    position: absolute;
    inset: 11%;
    z-index: 1;
    overflow: visible;
    border-radius: 50%;
    pointer-events: none;
}

.gf-event-vote-zone__effects i {
    position: absolute;
    left: 50%;
    bottom: 15%;
    display: block;
    pointer-events: none;
}

.gf-event-vote-zone:not(.is-zone-wrong):not(.is-zone-correct) .gf-event-vote-zone__effects i {
    width: clamp(5px, .7vw, 11px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgb(var(--gf-vote-color));
    box-shadow: 0 0 14px rgba(var(--gf-vote-color), .9);
    animation: gf-event-ice-drift 2.5s ease-in-out infinite;
}

.gf-event-vote-zone.is-zone-wrong .gf-event-vote-zone__floor {
    background: radial-gradient(circle, rgba(255, 196, 61, .24), rgba(255, 62, 24, .08) 50%, transparent 71%);
}

.gf-event-vote-zone.is-zone-correct .gf-event-vote-zone__floor {
    background: radial-gradient(circle, rgba(218, 252, 255, .25), rgba(51, 207, 247, .08) 50%, transparent 71%);
}

.gf-event-vote-zone--wrong .gf-event-vote-zone__effects i {
    width: clamp(10px, 1.6vw, 24px);
    height: clamp(20px, 3.5vw, 54px);
    border-radius: 70% 30% 62% 38%;
    background: linear-gradient(155deg, #fff6a1 3%, #ffbd2e 34%, #ff542a 68%, rgba(205, 24, 21, 0.1));
    box-shadow: 0 0 15px rgba(255, 91, 30, 0.86);
    filter: blur(0.3px);
    transform: translate(-50%, 8px) rotate(42deg) scale(0.75);
    transform-origin: 50% 100%;
    animation: gf-event-fire-dance 1.25s ease-in-out infinite;
}

.gf-event-vote-zone--correct .gf-event-vote-zone__effects i {
    width: clamp(7px, 1vw, 15px);
    aspect-ratio: 1;
    bottom: auto;
    border: 1px solid rgba(255, 255, 255, 0.9);
    background: linear-gradient(145deg, #fff, #8eeeff 55%, rgba(80, 166, 255, 0.35));
    box-shadow: 0 0 13px rgba(141, 240, 255, 0.9);
    clip-path: polygon(50% 0, 63% 36%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0 50%, 37% 36%);
    animation: gf-event-ice-drift 2.8s ease-in-out infinite;
}

.gf-event-vote-zone__effects i:nth-child(1) { left: 11%; bottom: 32%; animation-delay: -0.2s; }
.gf-event-vote-zone__effects i:nth-child(2) { left: 25%; bottom: 8%; animation-delay: -0.75s; }
.gf-event-vote-zone__effects i:nth-child(3) { left: 41%; bottom: 0; animation-delay: -1.1s; }
.gf-event-vote-zone__effects i:nth-child(4) { left: 58%; bottom: 0; animation-delay: -0.45s; }
.gf-event-vote-zone__effects i:nth-child(5) { left: 75%; bottom: 8%; animation-delay: -1.45s; }
.gf-event-vote-zone__effects i:nth-child(6) { left: 89%; bottom: 32%; animation-delay: -0.95s; }
.gf-event-vote-zone__effects i:nth-child(7) { left: 22%; bottom: 55%; animation-delay: -1.7s; }
.gf-event-vote-zone__effects i:nth-child(8) { left: 78%; bottom: 55%; animation-delay: -0.6s; }

.gf-event-vote-zone--correct .gf-event-vote-zone__effects i:nth-child(1) { top: 18%; bottom: auto; }
.gf-event-vote-zone--correct .gf-event-vote-zone__effects i:nth-child(2) { top: 65%; bottom: auto; }
.gf-event-vote-zone--correct .gf-event-vote-zone__effects i:nth-child(3) { top: 78%; bottom: auto; }
.gf-event-vote-zone--correct .gf-event-vote-zone__effects i:nth-child(4) { top: 8%; bottom: auto; }
.gf-event-vote-zone--correct .gf-event-vote-zone__effects i:nth-child(5) { top: 66%; bottom: auto; }
.gf-event-vote-zone--correct .gf-event-vote-zone__effects i:nth-child(6) { top: 28%; bottom: auto; }
.gf-event-vote-zone--correct .gf-event-vote-zone__effects i:nth-child(7) { top: 42%; bottom: auto; }
.gf-event-vote-zone--correct .gf-event-vote-zone__effects i:nth-child(8) { top: 48%; bottom: auto; }

.gf-event-vote-zone__label {
    position: absolute;
    inset: 50% auto auto 50%;
    z-index: 2;
    min-width: 86px;
    padding: 8px 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgba(var(--gf-vote-color), 0.68);
    border-radius: 999px;
    color: #fff;
    background: rgba(7, 12, 36, 0.86);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34), 0 0 25px rgba(var(--gf-vote-color), 0.26);
    font-size: clamp(0.72rem, 1.15vw, 0.92rem);
    pointer-events: auto;
    text-transform: uppercase;
    transform: translate(-50%, -50%);
    transition: transform 180ms var(--gf-campus-ease), background 180ms ease;
    backdrop-filter: blur(11px);
}

.gf-event-vote-zone__label b {
    min-width: 1.65em;
    height: 1.65em;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #071127;
    background: rgb(var(--gf-vote-color));
    font-size: .72em;
}

.gf-event-vote-zone__label small {
    color: #dce7ff;
    font-size: .62rem;
    font-weight: 900;
}

.gf-campus-stage.is-event-type-mcq .gf-event-vote-zone {
    width: clamp(170px, 23vw, 360px);
}

.gf-campus-stage.is-event-type-pulse_poll .gf-event-vote-zone {
    width: clamp(160px, 21vw, 320px);
}

.gf-campus-stage:is(.is-event-type-consensus_challenge, .is-event-type-sorting_zones, .is-event-type-map_finder, .is-event-type-space_finder) .gf-event-vote-zone {
    width: clamp(120px, 17vw, 245px);
}

.gf-campus-stage.is-event-type-mcq .gf-event-vote-zone__label,
.gf-campus-stage.is-event-type-pulse_poll .gf-event-vote-zone__label {
    max-width: 82%;
    border-radius: 15px;
    text-transform: none;
}

.gf-campus-stage.is-event-type-mcq .gf-event-vote-zone__label strong,
.gf-campus-stage.is-event-type-pulse_poll .gf-event-vote-zone__label strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gf-event-video-explainer {
    position: absolute;
    z-index: 170;
    inset: 31% auto auto 50%;
    width: min(720px, 72%);
    padding: 12px;
    border: 1px solid rgba(103, 232, 249, .55);
    border-radius: 22px;
    color: #fff;
    background: rgba(4, 8, 28, .94);
    box-shadow: 0 28px 90px rgba(0, 0, 0, .65), 0 0 50px rgba(34, 211, 238, .2);
    pointer-events: auto;
    transform: translateX(-50%);
    backdrop-filter: blur(16px);
}

.gf-event-video-explainer[hidden],
.gf-event-memory[hidden] {
    display: none !important;
}

.gf-event-video-explainer__kicker {
    padding: 4px 8px 10px;
    display: block;
    color: #9af5ff;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
}

.gf-event-video-explainer video {
    width: 100%;
    max-height: 44vh;
    display: block;
    border-radius: 14px;
    background: #000;
    object-fit: contain;
}

.gf-event-memory {
    position: absolute;
    z-index: 175;
    inset: 25% auto auto 50%;
    width: min(820px, 76%);
    padding: 16px;
    border: 1px solid rgba(196, 181, 253, .48);
    border-radius: 24px;
    color: #fff;
    background: rgba(7, 9, 31, .92);
    box-shadow: 0 28px 90px rgba(0, 0, 0, .55);
    pointer-events: auto;
    transform: translateX(-50%);
    backdrop-filter: blur(16px);
}

.gf-event-memory__target {
    margin-block-end: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #cbd5ff;
    font-size: .82rem;
    font-weight: 800;
}

.gf-event-memory__target strong {
    min-width: 56px;
    padding: 7px 12px;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, #7c5cff, #1fc7df);
    font-size: 1.25rem;
    text-align: center;
}

.gf-event-memory__deck {
    display: grid;
    grid-template-columns: repeat(6, minmax(54px, 1fr));
    gap: 10px;
}

.gf-memory-card {
    min-height: 72px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 14px;
    color: transparent;
    background: linear-gradient(135deg, #3d2b84, #12254e);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .04);
    font: 900 1.15rem/1 system-ui, sans-serif;
    cursor: pointer;
}

.gf-memory-card.is-face-up,
.gf-memory-card.is-matched,
.gf-event-memory[data-phase='preview'] .gf-memory-card {
    color: #081329;
    background: linear-gradient(135deg, #f4f1ff, #8cebf3);
}

.gf-memory-card.is-matched {
    border-color: #4ade80;
    box-shadow: 0 0 22px rgba(74, 222, 128, .55);
}

.gf-memory-card:disabled { cursor: default; }

.gf-event-memory > p {
    margin: 10px 0 0;
    color: #bdc9eb;
    font-size: .76rem;
    text-align: center;
}

.gf-event-vote-zone:hover .gf-event-vote-zone__floor,
.gf-event-vote-zone:focus-visible .gf-event-vote-zone__floor {
    filter: drop-shadow(0 0 28px rgba(var(--gf-vote-color), 0.8));
    transform: perspective(560px) rotateX(62deg) scale(1.06);
}

.gf-event-vote-zone:hover .gf-event-vote-zone__label,
.gf-event-vote-zone:focus-visible .gf-event-vote-zone__label,
.gf-event-vote-zone.is-selected .gf-event-vote-zone__label {
    background: rgba(var(--gf-vote-color), 0.82);
    transform: translate(-50%, -50%) scale(1.08);
}

.gf-event-vote-zone.is-selected .gf-event-vote-zone__draw {
    stroke: #fff;
    stroke-width: 11;
}

.gf-event-vote-zone:disabled {
    cursor: default;
}

.gf-event-arena[data-phase='reveal'] .gf-event-vote-zone:not(.is-answer),
.gf-event-arena[data-phase='results'] .gf-event-vote-zone:not(.is-answer),
.gf-event-arena[data-phase='completed'] .gf-event-vote-zone:not(.is-answer) {
    opacity: 0.3;
    filter: grayscale(0.7);
}

.gf-event-vote-zone.is-answer .gf-event-vote-zone__floor {
    filter: drop-shadow(0 0 38px rgba(var(--gf-vote-color), 0.95));
}

.gf-avatar-actor.is-event-vote-wrong .gf-avatar-rig {
    filter: drop-shadow(0 0 13px rgba(255, 68, 72, 0.95)) drop-shadow(0 11px 8px rgba(0, 0, 0, 0.28));
}

.gf-avatar-actor.is-event-vote-correct .gf-avatar-rig {
    filter: drop-shadow(0 0 13px rgba(32, 224, 145, 0.95)) drop-shadow(0 11px 8px rgba(0, 0, 0, 0.28));
}

.gf-avatar-actor.is-event-vote-choice .gf-avatar-rig {
    filter: drop-shadow(0 0 13px rgba(112, 226, 245, .92)) drop-shadow(0 11px 8px rgba(0, 0, 0, .28));
}

.gf-campus-stage.is-event-reveal .gf-avatar-actor.is-event-vote-correct,
.gf-campus-stage.is-event-reveal .gf-avatar-actor.is-event-vote-wrong {
    animation: gf-event-avatar-result 520ms var(--gf-campus-ease);
}

.gf-event-leaderboard {
    position: absolute;
    inset: clamp(76px, 8vw, 98px) 16px auto auto;
    z-index: 154;
    width: clamp(160px, 16vw, 220px);
    max-height: 235px;
    padding: 13px 11px;
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px;
    background: rgba(7, 12, 38, 0.8);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
    backdrop-filter: blur(16px);
}

[dir='rtl'] .gf-event-leaderboard {
    inset-inline: 16px auto;
}

.gf-event-leaderboard h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 0.76rem;
    font-weight: 900;
}

.gf-event-leaderboard ol {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gf-event-leaderboard li {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    gap: 5px;
    align-items: center;
    padding: 6px;
    border-radius: 9px;
    color: #dce4ff;
    background: rgba(255, 255, 255, 0.06);
    font-size: 0.62rem;
}

.gf-event-leaderboard li.is-current {
    color: #fff;
    background: linear-gradient(135deg, rgba(124, 92, 255, 0.36), rgba(33, 212, 232, 0.15));
}

.gf-event-leaderboard li strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@keyframes gf-event-countdown-in {
    from { opacity: 0; transform: translate(50%, -18px) scale(0.94); }
    to { opacity: 1; transform: translate(50%, 0) scale(1); }
}

@keyframes gf-event-scene-in {
    from { opacity: 0; filter: saturate(0.4) blur(8px); transform: scale(1.03); }
    to { opacity: 1; filter: saturate(1) blur(0); transform: scale(1); }
}

@keyframes gf-event-map-wash-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes gf-event-question-in {
    from { opacity: 0; transform: translate(50%, -12px) scale(0.96); }
    to { opacity: 1; transform: translate(50%, 0) scale(1); }
}

@keyframes gf-event-circle-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes gf-event-circle-pulse {
    0%, 100% { opacity: 0.25; transform: scale(0.9); }
    50% { opacity: 0.85; transform: scale(1.1); }
}

@keyframes gf-event-fire-dance {
    0%, 100% { opacity: 0.58; transform: translate(-50%, 9px) rotate(38deg) scale(0.68, 0.82); }
    35% { opacity: 1; transform: translate(-50%, -8px) rotate(47deg) scale(0.92, 1.18); }
    68% { opacity: 0.78; transform: translate(-50%, -2px) rotate(33deg) scale(0.78, 1.02); }
}

@keyframes gf-event-ice-drift {
    0%, 100% { opacity: 0.3; transform: translate(-8px, 8px) rotate(0deg) scale(0.72); }
    45% { opacity: 1; transform: translate(6px, -10px) rotate(135deg) scale(1.12); }
    72% { opacity: 0.7; transform: translate(2px, -4px) rotate(220deg) scale(0.9); }
}

@keyframes gf-event-avatar-result {
    0%, 100% { transform: translate(-50%, -82%); }
    45% { transform: translate(-50%, -92%) scale(1.06); }
}

@keyframes gf-event-room-arrive {
    from { opacity: 0; transform: translateY(14px) scale(0.88); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes gf-event-portal-spin {
    to { transform: rotate(360deg); }
}

@keyframes gf-event-number-tick {
    0% { transform: scale(0.8); opacity: 0.55; }
    55% { transform: scale(1.28); opacity: 1; }
    100% { transform: scale(1); }
}

@keyframes gf-event-teleport-flash {
    0% { opacity: 0; filter: brightness(0.7); }
    24% { opacity: 1; filter: brightness(1.35); }
    100% { opacity: 0; filter: brightness(2); }
}

@keyframes gf-event-teleport-ring {
    from { opacity: 0; transform: scale(0.12) rotate(-35deg); }
    45% { opacity: 1; }
    to { opacity: 0; transform: scale(1.75) rotate(35deg); }
}

@keyframes gf-event-teleport-icon {
    from { opacity: 0; transform: translateY(28vh) scale(0.4); }
    45% { opacity: 1; }
    to { opacity: 0; transform: translateY(-35vh) scale(1.25); }
}

.gf-campus-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(13, 16, 43, 0.18), transparent 22%, transparent 78%, rgba(13, 16, 43, 0.2)),
        radial-gradient(circle at 50% 78%, rgba(140, 118, 255, 0.08), transparent 34%);
}

.gf-campus-stage[data-campus-context="domain"]::before {
    background:
        linear-gradient(90deg, rgba(4, 54, 71, 0.28), transparent 24%, transparent 76%, rgba(4, 54, 71, 0.28)),
        radial-gradient(circle at 50% 72%, rgba(46, 224, 206, 0.2), transparent 38%);
}

.gf-campus-stage[data-campus-context="course"]::before {
    background:
        linear-gradient(90deg, rgba(36, 19, 83, 0.24), transparent 22%, transparent 78%, rgba(36, 19, 83, 0.24)),
        radial-gradient(circle at 50% 78%, rgba(151, 112, 255, 0.18), transparent 36%);
}

.gf-campus-stage.is-moving {
    cursor: grabbing;
}

.gf-campus-statusbar {
    position: absolute;
    inset: 16px 16px auto;
    z-index: 80;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    pointer-events: none;
}

.gf-campus-presence,
.gf-campus-help {
    padding: 9px 13px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.19);
    border-radius: 999px;
    color: #fff;
    background: rgba(12, 16, 42, 0.7);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
    font-size: 0.72rem;
    font-weight: 780;
    backdrop-filter: blur(13px);
}

.gf-campus-help {
    margin-top: 56px;
}

.gf-campus-presence__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #47e0aa;
    box-shadow: 0 0 0 5px rgba(71, 224, 170, 0.14);
}

.gf-campus-presence__label,
.gf-campus-presence__role {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.gf-campus-presence__label {
    padding-inline-end: 9px;
    border-inline-end: 1px solid rgba(255, 255, 255, 0.16);
    color: #b9f7e1;
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

[dir="rtl"] .gf-campus-presence__label {
    letter-spacing: 0;
}

.gf-campus-presence__role {
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(78, 211, 239, 0.1);
}

.gf-campus-presence__role i {
    color: #6fe5fa;
    font-size: 0.82rem;
}

.gf-campus-presence__role strong {
    font-size: 0.92rem;
}

.gf-campus-presence__role small {
    color: #d7e5f3;
    font-size: 0.62rem;
    font-weight: 760;
}

.gf-campus-presence__role--teachers {
    background: rgba(255, 199, 104, 0.1);
}

.gf-campus-presence__role--teachers i {
    color: #ffd47f;
}

.gf-campus-floor-hint {
    position: absolute;
    inset: auto 50% 18px auto;
    z-index: 70;
    padding: 8px 13px;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.88);
    background: rgba(11, 14, 37, 0.63);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    font-size: 0.7rem;
    font-weight: 750;
    pointer-events: none;
    transform: translateX(50%);
    backdrop-filter: blur(10px);
    animation: gf-hint-pulse 2.2s ease-in-out infinite;
}

[dir="rtl"] .gf-campus-floor-hint {
    transform: translateX(50%);
}

.gf-campus-stage.has-moved .gf-campus-floor-hint {
    opacity: 0;
    transition: opacity 300ms ease;
}

/* Campus rooms ----------------------------------------------------------- */

.gf-room-door {
    --gf-room-color: #6b9dff;
    position: absolute;
    left: var(--gf-room-x, 20%);
    top: var(--gf-room-y, 48%);
    z-index: 18;
    width: clamp(112px, 11vw, 176px);
    padding: 0;
    border: 0;
    color: #fff;
    background: transparent;
    text-align: center;
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: transform 240ms var(--gf-campus-ease), filter 240ms ease;
}

.gf-room-door:hover,
.gf-room-door:focus-visible {
    transform: translate(-50%, -50%) translateY(-6px) scale(1.035);
    filter: saturate(1.15) brightness(1.08);
}

.gf-room-door.is-mastery-locked {
    cursor: not-allowed;
    filter: saturate(.35) brightness(.72);
    opacity: .82;
}

.gf-room-door.is-mastery-locked .gf-room-door__portal {
    border-color: #ffca67;
    box-shadow: 0 0 0 5px rgba(255, 202, 103, .12), 0 16px 42px rgba(5, 8, 24, .48);
}

.gf-room-door.is-mastery-locked .gf-room-door__meta {
    color: #ffda8d;
}

.gf-room-door__presence {
    position: absolute;
    inset: -18px auto auto 50%;
    z-index: 4;
    min-width: 82px;
    padding: 5px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid color-mix(in srgb, var(--gf-room-color), white 38%);
    border-radius: 999px;
    color: #fff;
    background: rgba(7, 11, 31, 0.88);
    box-shadow: 0 0 20px color-mix(in srgb, var(--gf-room-color), transparent 62%), 0 8px 16px rgba(0, 0, 0, 0.24);
    pointer-events: none;
    transform: translateX(-50%);
    backdrop-filter: blur(10px);
}

.gf-room-door__presence > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
}

.gf-room-door__presence > span + span {
    padding-inline-start: 7px;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.17);
}

.gf-room-door__presence i {
    color: #7ee8fa;
    font-size: 0.72rem;
}

.gf-room-door__presence > span:last-child i {
    color: #ffd17a;
}

.gf-room-door__presence b {
    color: #fff;
    font-size: 0.75rem;
}

.gf-room-door__portal {
    position: relative;
    width: 74%;
    aspect-ratio: 0.88;
    margin-inline: auto;
    display: grid;
    place-items: center;
    border: 2px solid color-mix(in srgb, var(--gf-room-color), white 40%);
    border-radius: 50% 50% 20px 20px;
    background:
        radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.45), transparent 22%),
        var(--gf-room-theme-image, linear-gradient(transparent, transparent)) center / cover,
        linear-gradient(180deg, color-mix(in srgb, var(--gf-room-color), transparent 25%), rgba(17, 20, 50, 0.88));
    box-shadow: 0 0 26px color-mix(in srgb, var(--gf-room-color), transparent 35%), 0 18px 30px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(5px);
}

.gf-room-door__portal::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: inherit;
    opacity: 0.72;
}

.gf-room-door__portal i {
    position: relative;
    z-index: 1;
    font-size: clamp(1.45rem, 2.5vw, 2.25rem);
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3));
}

.gf-room-door__label {
    max-width: 100%;
    margin-top: 9px;
    padding: 7px 10px;
    display: inline-block;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #fff;
    background: rgba(10, 13, 34, 0.76);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
    font-size: clamp(0.62rem, 0.85vw, 0.76rem);
    font-weight: 820;
    text-overflow: ellipsis;
    white-space: nowrap;
    backdrop-filter: blur(8px);
}

.gf-room-door__meta {
    display: block;
    margin-top: 3px;
    color: #d1d2e8;
    font-size: 0.625rem;
    font-weight: 700;
}

/* Avatar actor ----------------------------------------------------------- */

.gf-avatar-actor {
    --gf-avatar-x: 50%;
    --gf-avatar-y: 78%;
    position: absolute;
    left: var(--gf-avatar-x);
    top: var(--gf-avatar-y);
    z-index: var(--gf-avatar-z, 55);
    width: clamp(62px, 6.4vw, 104px);
    pointer-events: auto;
    transform: translate(-50%, -82%);
    transition-property: left, top;
    transition-duration: var(--gf-walk-duration, 900ms);
    transition-timing-function: cubic-bezier(0.34, 0.78, 0.33, 1);
    will-change: left, top;
}

.gf-avatar-actor[data-current="false"] {
    width: clamp(52px, 5.1vw, 82px);
    opacity: 0.95;
    pointer-events: none;
}

.gf-avatar-rig {
    --gf-skin: #d89a72;
    --gf-hair: #30213b;
    --gf-outfit: #7256ea;
    --gf-accent: #21bfd2;
    position: relative;
    width: 100%;
    aspect-ratio: 0.7;
    filter: drop-shadow(0 11px 8px rgba(0, 0, 0, 0.28));
    transform-origin: 50% 88%;
}

.gf-avatar-shadow {
    position: absolute;
    left: 15%;
    bottom: -4%;
    width: 70%;
    height: 11%;
    border-radius: 50%;
    background: rgba(3, 6, 24, 0.42);
    filter: blur(3px);
}

.gf-avatar-head {
    position: absolute;
    left: 26%;
    top: 11%;
    z-index: 6;
    width: 48%;
    height: 31%;
    border: 2px solid rgba(40, 24, 42, 0.28);
    border-radius: 46% 46% 44% 44%;
    background: var(--gf-skin);
    box-shadow: inset 0 -5px 0 rgba(91, 49, 57, 0.08);
}

.gf-avatar-head::before,
.gf-avatar-head::after {
    content: "";
    position: absolute;
    top: 45%;
    width: 10%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #202541;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.gf-avatar-head::before { left: 23%; }
.gf-avatar-head::after { right: 23%; }

.gf-avatar-hair {
    position: absolute;
    left: 22%;
    top: 5%;
    z-index: 8;
    width: 56%;
    height: 24%;
    border-radius: 50% 52% 38% 32%;
    background: var(--gf-hair);
    box-shadow: inset -7px -4px 0 rgba(255, 255, 255, 0.07);
}

.gf-avatar-hair[data-style="curl"],
.gf-avatar-hair[data-style="curls"] {
    border-radius: 50%;
    box-shadow:
        -7px 5px 0 -1px var(--gf-hair),
        8px 5px 0 -1px var(--gf-hair),
        inset -5px -3px 0 rgba(255, 255, 255, 0.07);
}

.gf-avatar-hair[data-style="waves"] {
    border-radius: 58% 42% 56% 38%;
    clip-path: polygon(0 0, 100% 0, 94% 85%, 78% 70%, 62% 95%, 45% 72%, 27% 94%, 10% 70%);
}

.gf-avatar-hair[data-style="braids"] {
    border-radius: 50% 50% 38% 38%;
    box-shadow: -9px 15px 0 -3px var(--gf-hair), 9px 15px 0 -3px var(--gf-hair);
}

.gf-avatar-hair[data-style="covered"] {
    left: 18%;
    top: 3%;
    width: 64%;
    height: 38%;
    border-radius: 50% 50% 36% 36%;
    background: linear-gradient(145deg, var(--gf-accent), color-mix(in srgb, var(--gf-accent), #181d47 55%));
}

.gf-avatar-hair[data-style="none"] {
    display: none;
}

.gf-avatar-hair[data-style="long"] {
    height: 39%;
    border-radius: 50% 50% 40% 40%;
}

.gf-avatar-neck {
    position: absolute;
    left: 43%;
    top: 38%;
    z-index: 4;
    width: 14%;
    height: 10%;
    border-radius: 4px;
    background: var(--gf-skin);
}

.gf-avatar-body {
    position: absolute;
    left: 25%;
    top: 42%;
    z-index: 5;
    width: 50%;
    height: 34%;
    border: 2px solid rgba(22, 22, 58, 0.35);
    border-radius: 19px 19px 12px 12px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--gf-outfit), white 18%), var(--gf-outfit));
    box-shadow: inset -7px -6px 0 rgba(17, 20, 60, 0.14);
}

.gf-avatar-body::before {
    content: "";
    position: absolute;
    inset: 12% 31% auto;
    height: 45%;
    border-radius: 8px;
    background: var(--gf-accent);
    opacity: 0.9;
}

.gf-avatar-arm {
    position: absolute;
    top: 45%;
    z-index: 3;
    width: 17%;
    height: 35%;
    border: 2px solid rgba(22, 22, 58, 0.3);
    border-radius: 12px;
    background: var(--gf-outfit);
    transform-origin: 50% 12%;
}

.gf-avatar-arm--left { left: 15%; transform: rotate(8deg); }
.gf-avatar-arm--right { right: 15%; transform: rotate(-8deg); }

.gf-avatar-rig[data-base-style="scholar"] .gf-avatar-body,
.gf-avatar-rig[data-base-style="scholar"] .gf-avatar-arm {
    background: linear-gradient(145deg, #3f5b9b, #24366c);
}

.gf-avatar-rig[data-base-style="scholar"] .gf-avatar-body::before {
    inset: 8% 43% auto;
    height: 54%;
    clip-path: polygon(50% 0, 100% 24%, 66% 100%, 34% 100%, 0 24%);
    background: color-mix(in srgb, var(--gf-accent), white 18%);
}

.gf-avatar-rig[data-base-style="creator"] .gf-avatar-body,
.gf-avatar-rig[data-base-style="creator"] .gf-avatar-arm {
    background: linear-gradient(145deg, var(--gf-accent), #b64ee8 58%, #ff6685);
}

.gf-avatar-rig[data-base-style="creator"] .gf-avatar-body::before {
    inset: 17% 20% auto;
    height: 28%;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    transform: rotate(-12deg);
}

.gf-avatar-rig[data-base-style="mentor"] .gf-avatar-body,
.gf-avatar-rig[data-base-style="mentor"] .gf-avatar-arm {
    border-color: rgba(255, 214, 95, 0.82);
    background: linear-gradient(145deg, #51469b, #24295c);
    box-shadow: inset 0 0 0 2px rgba(255, 211, 92, 0.22);
}

.gf-avatar-rig[data-base-style="mentor"] .gf-avatar-body::before {
    inset: 10% 34% auto;
    height: 48%;
    clip-path: polygon(50% 0, 100% 42%, 50% 100%, 0 42%);
    background: linear-gradient(145deg, #fff5ad, #ffc857);
}

.gf-avatar-leg {
    position: absolute;
    top: 72%;
    z-index: 2;
    width: 19%;
    height: 24%;
    border: 2px solid rgba(22, 22, 58, 0.34);
    border-radius: 6px 6px 10px 10px;
    background: #303b72;
    transform-origin: 50% 5%;
}

.gf-avatar-leg--left { left: 29%; }
.gf-avatar-leg--right { right: 29%; }

.gf-avatar-leg::after {
    content: "";
    position: absolute;
    inset: auto -13% -4% -7%;
    height: 27%;
    border-radius: 8px 8px 5px 5px;
    background: #12172e;
}

/* Body silhouettes and unlockable fantasy races share the same equipment rig. */
.gf-avatar-rig[data-body-type="female"] .gf-avatar-head {
    left: 28%;
    width: 44%;
    height: 30%;
    border-radius: 49% 49% 45% 45%;
}

.gf-avatar-rig[data-body-type="female"] .gf-avatar-body {
    left: 27%;
    width: 46%;
    border-radius: 23px 23px 16px 16px;
    clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
}

.gf-avatar-rig[data-body-type="female"] .gf-avatar-arm { width: 15%; }
.gf-avatar-rig[data-body-type="female"] .gf-avatar-arm--left { left: 18%; }
.gf-avatar-rig[data-body-type="female"] .gf-avatar-arm--right { right: 18%; }
.gf-avatar-rig[data-body-type="female"] .gf-avatar-leg { width: 17%; }
.gf-avatar-rig[data-body-type="female"] .gf-avatar-leg--left { left: 31%; }
.gf-avatar-rig[data-body-type="female"] .gf-avatar-leg--right { right: 31%; }

.gf-avatar-rig[data-avatar-race="elf"]::before,
.gf-avatar-rig[data-avatar-race="elf"]::after,
.gf-avatar-rig[data-avatar-race="beastkin"]::before,
.gf-avatar-rig[data-avatar-race="beastkin"]::after {
    content: "";
    position: absolute;
    top: 19%;
    z-index: 5;
    width: 20%;
    height: 9%;
    background: var(--gf-skin);
}

.gf-avatar-rig[data-avatar-race="elf"]::before { left: 14%; clip-path: polygon(100% 10%, 0 50%, 100% 90%); }
.gf-avatar-rig[data-avatar-race="elf"]::after { right: 14%; clip-path: polygon(0 10%, 100% 50%, 0 90%); }

.gf-avatar-rig[data-avatar-race="beastkin"]::before,
.gf-avatar-rig[data-avatar-race="beastkin"]::after {
    top: 3%;
    width: 24%;
    height: 23%;
    background: linear-gradient(145deg, var(--gf-hair), color-mix(in srgb, var(--gf-hair), white 20%));
}

.gf-avatar-rig[data-avatar-race="beastkin"]::before { left: 16%; clip-path: polygon(5% 0, 100% 100%, 18% 78%); }
.gf-avatar-rig[data-avatar-race="beastkin"]::after { right: 16%; clip-path: polygon(95% 0, 82% 78%, 0 100%); }

.gf-avatar-rig[data-avatar-race="android"] .gf-avatar-head,
.gf-avatar-rig[data-avatar-race="android"] .gf-avatar-neck {
    border-color: color-mix(in srgb, var(--gf-accent), white 34%);
    border-radius: 28% 28% 38% 38%;
    background: linear-gradient(145deg, #d8e5ee, #6d7899);
}

.gf-avatar-rig[data-avatar-race="android"] .gf-avatar-head::before,
.gf-avatar-rig[data-avatar-race="android"] .gf-avatar-head::after {
    background: #8effff;
    box-shadow: 0 0 7px #34e5ff;
}

.gf-avatar-rig[data-avatar-race="android"] :is(.gf-avatar-body, .gf-avatar-arm, .gf-avatar-leg) {
    border-color: rgba(91, 232, 255, 0.72);
    background: linear-gradient(145deg, #68789f, #222c52);
}

.gf-avatar-rig[data-avatar-race="celestial"] {
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--gf-accent), white 35%));
}

.gf-avatar-rig[data-avatar-race="celestial"]::before {
    content: "";
    position: absolute;
    left: 22%;
    top: 0;
    z-index: 10;
    width: 56%;
    height: 10%;
    border: 3px solid #ffe787;
    border-radius: 50%;
    box-shadow: 0 0 12px #ffd95a;
}

.gf-avatar-rig[data-avatar-race="celestial"] .gf-avatar-head::before,
.gf-avatar-rig[data-avatar-race="celestial"] .gf-avatar-head::after {
    background: #fff5a8;
    box-shadow: 0 0 8px #ffd95a;
}

.gf-avatar-rig[data-avatar-race="titan"] {
    transform: scaleX(1.12);
}

.gf-avatar-rig[data-avatar-race="titan"] .gf-avatar-body {
    left: 21%;
    width: 58%;
    border-radius: 15px 15px 10px 10px;
}

.gf-avatar-rig[data-avatar-race="titan"] .gf-avatar-arm { width: 20%; }
.gf-avatar-rig[data-avatar-race="titan"] .gf-avatar-arm--left { left: 10%; }
.gf-avatar-rig[data-avatar-race="titan"] .gf-avatar-arm--right { right: 10%; }

.gf-avatar-rig[data-avatar-race="kitsune"]::before,
.gf-avatar-rig[data-avatar-race="kitsune"]::after,
.gf-avatar-rig[data-avatar-race="moonrabbit"]::before,
.gf-avatar-rig[data-avatar-race="moonrabbit"]::after,
.gf-avatar-rig[data-avatar-race="dragonkin"]::before,
.gf-avatar-rig[data-avatar-race="dragonkin"]::after {
    content: "";
    position: absolute;
    z-index: 5;
    background: linear-gradient(145deg, var(--gf-hair), color-mix(in srgb, var(--gf-accent), white 32%));
    filter: drop-shadow(0 2px 3px rgba(14, 14, 40, 0.3));
}

.gf-avatar-rig[data-avatar-race="kitsune"]::before,
.gf-avatar-rig[data-avatar-race="kitsune"]::after {
    top: 1%;
    width: 24%;
    height: 25%;
}

.gf-avatar-rig[data-avatar-race="kitsune"]::before { left: 15%; clip-path: polygon(8% 0, 100% 100%, 18% 78%); }
.gf-avatar-rig[data-avatar-race="kitsune"]::after { right: 15%; clip-path: polygon(92% 0, 82% 78%, 0 100%); }

.gf-avatar-rig[data-avatar-race="moonrabbit"]::before,
.gf-avatar-rig[data-avatar-race="moonrabbit"]::after {
    top: -18%;
    width: 18%;
    height: 35%;
    border-radius: 70% 70% 34% 34%;
}

.gf-avatar-rig[data-avatar-race="moonrabbit"]::before { left: 25%; transform: rotate(-8deg); }
.gf-avatar-rig[data-avatar-race="moonrabbit"]::after { right: 25%; transform: rotate(8deg); }

.gf-avatar-rig[data-avatar-race="dragonkin"]::before,
.gf-avatar-rig[data-avatar-race="dragonkin"]::after {
    top: 2%;
    width: 25%;
    height: 18%;
    background: linear-gradient(145deg, var(--gf-accent), #fff1a1);
}

.gf-avatar-rig[data-avatar-race="dragonkin"]::before { left: 10%; clip-path: polygon(100% 100%, 0 0, 32% 100%); }
.gf-avatar-rig[data-avatar-race="dragonkin"]::after { right: 10%; clip-path: polygon(0 100%, 100% 0, 68% 100%); }

.gf-avatar-rig[data-avatar-race="merfolk"] .gf-avatar-leg {
    top: 70%;
    width: 24%;
    height: 28%;
    border: 0;
    border-radius: 60% 12% 70% 20%;
    background: linear-gradient(165deg, color-mix(in srgb, var(--gf-accent), white 30%), #087d91);
}

.gf-avatar-rig[data-avatar-race="merfolk"] .gf-avatar-leg--left { left: 28%; transform: rotate(8deg); }
.gf-avatar-rig[data-avatar-race="merfolk"] .gf-avatar-leg--right { right: 28%; transform: rotate(-8deg); }
.gf-avatar-rig[data-avatar-race="merfolk"] .gf-avatar-leg::after { background: color-mix(in srgb, var(--gf-accent), #087d91 55%); }

.gf-avatar-rig[data-avatar-race="djinn"] .gf-avatar-leg {
    border: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--gf-accent), white 20%), transparent);
    filter: drop-shadow(0 8px 6px color-mix(in srgb, var(--gf-accent), transparent 55%));
}

.gf-avatar-rig[data-avatar-race="phoenixborn"] {
    filter: drop-shadow(0 0 11px color-mix(in srgb, #ff8a35, transparent 20%));
}

.gf-avatar-rig[data-avatar-race="phoenixborn"] :is(.gf-avatar-body, .gf-avatar-arm, .gf-avatar-leg) {
    border-color: #ffd774;
    background: linear-gradient(155deg, #ffcc56, #ec573d 52%, #6d235a);
}

.gf-avatar-item {
    position: absolute;
    z-index: 12;
    pointer-events: none;
}

.gf-avatar-item[data-slot="head"],
.gf-avatar-item[data-slot="hair"] {
    left: 20%;
    top: -4%;
    width: 60%;
    height: 26%;
}

.gf-avatar-item[data-slot="head"]::before {
    content: "";
    position: absolute;
    inset: 24% 8% 0;
    clip-path: polygon(0 100%, 4% 42%, 28% 69%, 48% 12%, 68% 68%, 96% 38%, 100% 100%);
    background: linear-gradient(180deg, #fff7b0, #ffc857 52%, #de8c25);
    filter: drop-shadow(0 5px 5px rgba(103, 54, 0, 0.3));
}

.gf-avatar-item[data-slot="body"],
.gf-avatar-item[data-slot="top"] {
    left: 20%;
    top: 39%;
    width: 60%;
    height: 42%;
    border: 3px solid color-mix(in srgb, var(--gf-accent), white 26%);
    border-radius: 22px 22px 14px 14px;
    background:
        linear-gradient(90deg, transparent 46%, rgba(255, 255, 255, 0.46) 47% 53%, transparent 54%),
        linear-gradient(145deg, var(--gf-accent), color-mix(in srgb, var(--gf-accent), #111735 62%));
    opacity: 0.78;
}

.gf-avatar-item[data-slot="back"] {
    left: 16%;
    top: 39%;
    z-index: 1;
    width: 68%;
    height: 50%;
    clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%);
    border-radius: 20px;
    background: linear-gradient(160deg, var(--gf-accent), var(--gf-cosmetic-2, rgba(41, 199, 217, 0.48)));
}

.gf-avatar-item[data-slot="companion"],
.gf-avatar-item[data-slot="accessory"],
.gf-avatar-item[data-slot="hand"] {
    right: -10%;
    top: 38%;
    width: 26%;
    aspect-ratio: 1;
    border: 2px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, var(--gf-accent) 38%, rgba(48, 33, 130, 0.7));
    box-shadow: 0 0 14px var(--gf-accent);
    animation: gf-orb-float 2.6s ease-in-out infinite;
}

/* Companion cosmetics stay inside the synchronized avatar rig, so they move
   with their owner while adding a gentle independent hop beside the avatar. */
.gf-avatar-item[data-slot="companion"] {
    right: -43%;
    top: 59%;
    width: 46%;
    height: 34%;
    aspect-ratio: auto;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    animation: gf-companion-follow-hop 2.15s cubic-bezier(0.45, 0, 0.25, 1) infinite;
    transform-origin: 50% 100%;
}

.gf-avatar-item[data-slot="companion"]::before {
    content: "";
    position: absolute;
    inset: 20% 10% 3%;
    border: 2px solid rgba(255, 255, 255, 0.72);
    border-radius: 48% 52% 44% 46%;
    background:
        radial-gradient(circle at 34% 38%, #18152d 0 4%, transparent 5%),
        radial-gradient(circle at 66% 38%, #18152d 0 4%, transparent 5%),
        linear-gradient(145deg, color-mix(in srgb, var(--gf-accent), white 38%), var(--gf-accent));
    box-shadow: 0 7px 10px rgba(10, 12, 38, 0.3), inset 0 0 0 2px rgba(255, 255, 255, 0.12);
}

.gf-avatar-item[data-slot="companion"]::after {
    content: "";
    position: absolute;
    right: -5%;
    top: 31%;
    width: 34%;
    height: 24%;
    border: 3px solid var(--gf-accent);
    border-bottom: 0;
    border-left: 0;
    border-radius: 0 100% 0 0;
    transform: rotate(24deg);
    transform-origin: 0 100%;
    animation: gf-companion-tail-wave 1.25s ease-in-out infinite alternate;
}

.gf-avatar-item[data-slot="companion"][data-visual*="fox"],
.gf-avatar-item[data-slot="companion"][data-visual*="shiba"],
.gf-avatar-item[data-slot="companion"][data-visual*="tanuki"] { --gf-accent: #ef8b4a; }
.gf-avatar-item[data-slot="companion"][data-visual*="rabbit"] { --gf-accent: #d7c9ff; }
.gf-avatar-item[data-slot="companion"][data-visual*="dragon"] { --gf-accent: #42c98d; }
.gf-avatar-item[data-slot="companion"][data-visual*="turtle"],
.gf-avatar-item[data-slot="companion"][data-visual*="dolphin"],
.gf-avatar-item[data-slot="companion"][data-visual*="koi"] { --gf-accent: #35bfd4; }
.gf-avatar-item[data-slot="companion"][data-visual*="parrot"],
.gf-avatar-item[data-slot="companion"][data-visual*="ibis"],
.gf-avatar-item[data-slot="companion"][data-visual*="crane"],
.gf-avatar-item[data-slot="companion"][data-visual*="falcon"],
.gf-avatar-item[data-slot="companion"][data-visual*="owl"] { --gf-accent: #f4c957; }
.gf-avatar-item[data-slot="companion"][data-visual*="panda"],
.gf-avatar-item[data-slot="companion"][data-visual*="meerkat"],
.gf-avatar-item[data-slot="companion"][data-visual*="otter"] { --gf-accent: #b97c50; }
.gf-avatar-item[data-slot="companion"][data-visual*="sprite"],
.gf-avatar-item[data-slot="companion"][data-visual*="scarab"] { --gf-accent: #9b72ff; }

.gf-avatar-item--preview[data-slot="companion"] {
    right: 25%;
    top: 28%;
    width: 50%;
    height: 48%;
}

.gf-avatar-item[data-slot="face"] {
    left: 31%;
    top: 22%;
    width: 38%;
    height: 10%;
    border: 3px solid var(--gf-accent);
    border-radius: 999px;
    box-shadow: inset 18px 0 0 -14px rgba(255, 255, 255, 0.5), inset -18px 0 0 -14px rgba(255, 255, 255, 0.5);
}

.gf-avatar-item[data-slot="aura"] {
    inset: 3% 2% 0;
    z-index: 0;
    border: 3px solid color-mix(in srgb, var(--gf-accent), white 30%);
    border-radius: 50%;
    opacity: 0.5;
    filter: blur(1px);
    box-shadow: 0 0 22px var(--gf-accent), inset 0 0 18px var(--gf-accent);
    animation: gf-aura-pulse 2.4s ease-in-out infinite;
}

.gf-avatar-item[data-slot="bottom"] {
    left: 24%;
    top: 68%;
    width: 52%;
    height: 18%;
    border-radius: 8px 8px 14px 14px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--gf-accent), #2c356f 55%), #252e66);
    opacity: 0.86;
}

.gf-avatar-item[data-slot="feet"] {
    left: 22%;
    top: 89%;
    width: 56%;
    height: 8%;
    border-radius: 999px;
    background: color-mix(in srgb, var(--gf-accent), #10162f 68%);
    box-shadow: 0 3px 0 rgba(255, 255, 255, 0.15) inset;
}

.gf-avatar-item[data-slot="costume"] {
    left: 12%;
    top: 35%;
    z-index: 10;
    width: 76%;
    height: 61%;
    border: 3px solid color-mix(in srgb, var(--gf-accent), white 34%);
    border-radius: 28px 28px 20px 20px;
    background:
        linear-gradient(90deg, transparent 46%, rgba(255, 255, 255, 0.28) 47% 53%, transparent 54%),
        linear-gradient(155deg, color-mix(in srgb, var(--gf-accent), white 18%), color-mix(in srgb, var(--gf-accent), #111735 58%));
    clip-path: polygon(19% 0, 81% 0, 100% 38%, 84% 48%, 90% 100%, 54% 92%, 50% 72%, 46% 92%, 10% 100%, 16% 48%, 0 38%);
    filter: drop-shadow(0 8px 8px rgba(8, 10, 30, 0.32));
}

.gf-avatar-item[data-slot="costume"]::after {
    content: "";
    position: absolute;
    inset: 17% 36% auto;
    aspect-ratio: 1;
    border: 2px solid rgba(255, 255, 255, 0.78);
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0 15%, var(--gf-accent) 18% 56%, transparent 59%);
    box-shadow: 0 0 12px var(--gf-accent);
}

.gf-avatar-item[data-slot="shape"] {
    inset: -1% -5% 0;
    z-index: 2;
    border: 4px solid color-mix(in srgb, var(--gf-accent), white 38%);
    background: color-mix(in srgb, var(--gf-accent), transparent 88%);
    opacity: 0.7;
    filter: drop-shadow(0 0 10px var(--gf-accent));
    animation: gf-shape-breathe 3.2s ease-in-out infinite;
}

.gf-avatar-item[data-asset-url] {
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--gf-item-asset) center / contain no-repeat !important;
    box-shadow: none !important;
    clip-path: none !important;
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--gf-accent), transparent 38%));
    opacity: 1 !important;
}

.gf-avatar-item[data-asset-url]::before,
.gf-avatar-item[data-asset-url]::after {
    display: none !important;
}

.gf-avatar-item[data-visual*="shape-star"] { clip-path: polygon(50% 0, 61% 34%, 98% 34%, 68% 55%, 79% 92%, 50% 70%, 21% 92%, 32% 55%, 2% 34%, 39% 34%); }
.gf-avatar-item[data-visual*="shape-hex"] { clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); }
.gf-avatar-item[data-visual*="shape-diamond"] { clip-path: polygon(50% 0, 94% 50%, 50% 100%, 6% 50%); }
.gf-avatar-item[data-visual*="shape-crescent"] { border-radius: 50%; box-shadow: -13px 0 0 color-mix(in srgb, var(--gf-accent), white 24%); }
.gf-avatar-item[data-visual*="shape-orbit"] { border-radius: 50% 38% 50% 38%; transform: rotate(-8deg); }
.gf-avatar-item[data-visual*="shape-pixel"] { clip-path: polygon(15% 0, 85% 0, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0 85%, 0 15%, 15% 15%); }

.gf-avatar-item[data-visual*="solar-ronin"] { --gf-accent: #ff784f; }
.gf-avatar-item[data-visual*="inkstorm"] { --gf-accent: #ae70ff; }
.gf-avatar-item[data-visual*="nebula-navigator"] { --gf-accent: #6f8cff; }
.gf-avatar-item[data-visual*="astral-sovereign"] { --gf-accent: #ffc857; }
.gf-avatar-item[data-visual*="titan-circuit"] { --gf-accent: #28e1c1; }
.gf-avatar-item[data-visual*="aurora-mythweaver"] { --gf-accent: #ff70ca; }

.gf-avatar-item[data-slot="aura"][data-visual*="solar"],
.gf-avatar-item[data-slot="aura"][data-visual*="flame"] {
    border-radius: 48% 52% 46% 54%;
    border-style: dashed;
    animation-duration: 1.4s;
}

.gf-avatar-item[data-slot="aura"][data-visual*="circuit"],
.gf-avatar-item[data-slot="aura"][data-visual*="pixel"] {
    border-radius: 18%;
    border-style: dotted;
}

.gf-avatar-item[data-slot="aura"][data-visual*="aurora"],
.gf-avatar-item[data-slot="aura"][data-visual*="nebula"] {
    border-color: #ff8bd7 #78ddff #a98bff #78ffd2;
    transform: rotate(-4deg);
}

.gf-avatar-item[data-visual="starlight-crown"]::before,
.gf-avatar-item[data-visual="mentor-crown"]::before,
.gf-avatar-item[data-visual="crown"]::before {
    content: "";
    position: absolute;
    inset: 24% 7% 0;
    clip-path: polygon(0 100%, 4% 40%, 28% 69%, 47% 10%, 67% 68%, 96% 34%, 100% 100%);
    background: linear-gradient(180deg, #fff7b0, #ffc857 52%, #df8c25);
    filter: drop-shadow(0 5px 5px rgba(103, 54, 0, 0.3));
}

.gf-avatar-item[data-visual="academy-jacket"] {
    border-color: #a89aff;
    background: linear-gradient(150deg, rgba(92, 70, 217, 0.88), rgba(34, 193, 201, 0.38));
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12);
}

.gf-avatar-item[data-visual="academy-jacket"]::after {
    content: "G";
    position: absolute;
    inset: 18% auto auto 18%;
    color: #fff;
    font-size: 0.52rem;
    font-weight: 900;
}

.gf-avatar-item[data-visual="circuit-hoodie"] {
    border-color: #5dffe0;
    background: repeating-linear-gradient(135deg, rgba(31, 218, 179, 0.82) 0 5px, rgba(31, 75, 115, 0.72) 5px 10px);
    box-shadow: 0 0 13px rgba(52, 225, 184, 0.42);
}

.gf-avatar-item[data-visual="pathfinder-sneakers"] {
    background: linear-gradient(90deg, #172d43 0 42%, #2fd7c4 42% 58%, #172d43 58%);
}

.gf-avatar-item[data-visual="cosmic-sneakers"] {
    background: linear-gradient(90deg, #5836bf, #38cfff 45%, #e986ff);
    box-shadow: 0 0 13px rgba(56, 207, 255, 0.7);
}

.gf-avatar-item[data-visual="spark-backpack"] {
    background: linear-gradient(160deg, #ffca62, #ef6e53 62%, #783cb7);
    clip-path: inset(0 10% 0 round 18px);
}

.gf-avatar-item[data-visual="nebula-cape"] {
    background: radial-gradient(circle at 68% 24%, #fff 0 2%, transparent 3%), linear-gradient(155deg, #b46cff, #3b277e 58%, #171f51);
    clip-path: polygon(17% 0, 83% 0, 100% 100%, 50% 86%, 0 100%);
    box-shadow: 0 0 18px rgba(152, 77, 255, 0.65);
}

.gf-avatar-item[data-visual="quest-lantern"] {
    border-radius: 30% 30% 45% 45%;
    background: radial-gradient(circle at 50% 48%, #fff9b8, #ffc857 45%, #8c4e1b 72%);
    box-shadow: 0 0 18px rgba(255, 215, 107, 0.9);
}

.gf-avatar-item[data-visual="lunar-trousers"] {
    background: linear-gradient(145deg, #9aaaff, #33478f 62%, #222a61);
    box-shadow: inset 0 0 0 2px rgba(215, 226, 255, 0.26);
}

.gf-avatar-item[data-visual="prism-visor"] {
    border-color: transparent;
    background: linear-gradient(90deg, #55d8ff, #ff70ca 48%, #ffe975);
    box-shadow: 0 0 12px rgba(255, 112, 202, 0.7);
    opacity: 0.88;
}

.gf-avatar-item[data-visual="star-scholar-hair"]::before {
    content: "";
    position: absolute;
    inset: 20% 8% 0;
    clip-path: polygon(0 72%, 14% 22%, 34% 40%, 50% 0, 66% 40%, 86% 20%, 100% 72%, 78% 58%, 72% 100%, 28% 100%, 22% 58%);
    background: linear-gradient(150deg, #43245e, #8e72ff 55%, #efb7ff);
    filter: drop-shadow(0 0 7px rgba(142, 114, 255, 0.75));
}

.gf-avatar-item[data-visual="constellation-aura"] {
    border-style: dotted;
    border-color: #d7c6ff;
    box-shadow: 0 0 28px #a989ff, inset 0 0 20px #6c43d0;
}

.gf-avatar-item[data-visual="focus-aura"] {
    border-style: solid;
    border-color: #9cf6ff;
    box-shadow: 0 0 20px #4fe8f5, inset 0 0 14px #77e5ff;
}

/* Original genre collection palettes. Every visual key carries its own
   palette so equipping one never collapses back to a generic slot color. */
.gf-avatar-item[data-visual^="campus-cadet-"] { --gf-accent: #6554e8; --gf-cosmetic-2: #59dcff; }
.gf-avatar-item[data-visual^="toon-trailblazer-"] { --gf-accent: #ff825c; --gf-cosmetic-2: #ffe765; }
.gf-avatar-item[data-visual^="moss-alchemist-"] { --gf-accent: #4cdfa1; --gf-cosmetic-2: #d8ff69; }
.gf-avatar-item[data-visual^="cloud-coder-"] { --gf-accent: #59d8ff; --gf-cosmetic-2: #f5fbff; }
.gf-avatar-item[data-visual^="prism-sentinel-"] { --gf-accent: #48a8ff; --gf-cosmetic-2: #ff66d8; }
.gf-avatar-item[data-visual^="neon-beatmaker-"] { --gf-accent: #ff58cf; --gf-cosmetic-2: #4df4ff; }
.gf-avatar-item[data-visual^="solar-ronin-"] { --gf-accent: #ff784f; --gf-cosmetic-2: #ffd85a; }
.gf-avatar-item[data-visual^="inkstorm-adventurer-"] { --gf-accent: #ae70ff; --gf-cosmetic-2: #ecdcff; }
.gf-avatar-item[data-visual^="nebula-navigator-"] { --gf-accent: #6f8cff; --gf-cosmetic-2: #c976ff; }
.gf-avatar-item[data-visual^="astral-sovereign-"] { --gf-accent: #ffc857; --gf-cosmetic-2: #f3ecff; }
.gf-avatar-item[data-visual^="titan-circuit-"] { --gf-accent: #28e1c1; --gf-cosmetic-2: #84a8ff; }
.gf-avatar-item[data-visual^="aurora-mythweaver-"] { --gf-accent: #ff70ca; --gf-cosmetic-2: #78ffd2; }
.gf-avatar-item[data-visual^="spirit-swordsman-"] { --gf-accent: #72a5ff; --gf-cosmetic-2: #d9efff; }
.gf-avatar-item[data-visual^="academy-hero-"] { --gf-accent: #ff6b64; --gf-cosmetic-2: #ffd85a; }
.gf-avatar-item[data-visual^="cyber-idol-"] { --gf-accent: #f35ed8; --gf-cosmetic-2: #5df2ff; }
.gf-avatar-item[data-visual^="retro-astronaut-"] { --gf-accent: #ff9f43; --gf-cosmetic-2: #e9f6ff; }
.gf-avatar-item[data-visual^="forest-guardian-"] { --gf-accent: #55c878; --gf-cosmetic-2: #d7ef6b; }
.gf-avatar-item[data-visual^="street-skater-"] { --gf-accent: #42b7e9; --gf-cosmetic-2: #ff6a8d; }
.gf-avatar-item[data-visual^="city-detective-"] { --gf-accent: #b48b68; --gf-cosmetic-2: #e6d1b4; }
.gf-avatar-item[data-visual^="noir-agent-"] { --gf-accent: #737b96; --gf-cosmetic-2: #d9e1ff; }
.gf-avatar-item[data-visual^="desert-ranger-"] { --gf-accent: #d99a4e; --gf-cosmetic-2: #f4d58d; }
.gf-avatar-item[data-visual^="deep-sea-diver-"] { --gf-accent: #2aacc8; --gf-cosmetic-2: #75f0da; }
.gf-avatar-item[data-visual^="storm-shogun-"] { --gf-accent: #5e8cff; --gf-cosmetic-2: #efff65; }
.gf-avatar-item[data-visual^="ember-dragoon-"] { --gf-accent: #ff503f; --gf-cosmetic-2: #ffca4f; }
.gf-avatar-item[data-visual^="frost-valkyrie-"] { --gf-accent: #81d8ff; --gf-cosmetic-2: #e8fbff; }
.gf-avatar-item[data-visual^="void-reaper-"] { --gf-accent: #7b4bdb; --gf-cosmetic-2: #ff4fc8; }
.gf-avatar-item[data-visual^="celestial-kitsune-"] { --gf-accent: #b684ff; --gf-cosmetic-2: #72ecff; }
.gf-avatar-item[data-visual^="ocean-oracle-"] { --gf-accent: #23bcd7; --gf-cosmetic-2: #7dffd8; }
.gf-avatar-item[data-visual^="jade-tempest-"] { --gf-accent: #39d49b; --gf-cosmetic-2: #d7ff80; }
.gf-avatar-item[data-visual^="rose-seraph-"] { --gf-accent: #ff6fae; --gf-cosmetic-2: #ffe6f3; }
.gf-avatar-item[data-visual^="chrono-samurai-"] { --gf-accent: #e6ad45; --gf-cosmetic-2: #63d8ff; }
.gf-avatar-item[data-visual^="shadow-ninja-"] { --gf-accent: #55527f; --gf-cosmetic-2: #b160ff; }
.gf-avatar-item[data-visual^="lunar-moth-"] { --gf-accent: #9c8cff; --gf-cosmetic-2: #c5ffed; }
.gf-avatar-item[data-visual^="sun-phoenix-"] { --gf-accent: #ff8a35; --gf-cosmetic-2: #fff074; }

.gf-avatar-item[data-slot="costume"][data-visual*="toon-trailblazer"],
.gf-avatar-item[data-slot="costume"][data-visual*="inkstorm"] {
    border-radius: 14px 28px 12px 30px;
    background: repeating-linear-gradient(145deg, var(--gf-accent) 0 8px, var(--gf-cosmetic-2) 8px 11px, #222342 11px 18px);
    clip-path: polygon(8% 10%, 40% 0, 55% 10%, 88% 2%, 100% 42%, 80% 52%, 96% 100%, 51% 83%, 12% 100%, 18% 53%, 0 38%);
}

.gf-avatar-item[data-slot="costume"][data-visual*="storm-shogun"],
.gf-avatar-item[data-slot="costume"][data-visual*="chrono-samurai"],
.gf-avatar-item[data-slot="costume"][data-visual*="solar-ronin"] {
    border-radius: 8px 8px 24px 24px;
    background:
        linear-gradient(90deg, transparent 20%, var(--gf-cosmetic-2) 21% 27%, transparent 28% 72%, var(--gf-cosmetic-2) 73% 79%, transparent 80%),
        linear-gradient(160deg, var(--gf-accent), #191d46 66%);
    clip-path: polygon(14% 0, 86% 0, 100% 28%, 81% 42%, 96% 100%, 56% 86%, 50% 64%, 44% 86%, 4% 100%, 19% 42%, 0 28%);
}

.gf-avatar-item[data-slot="costume"][data-visual*="ember-dragoon"],
.gf-avatar-item[data-slot="costume"][data-visual*="sun-phoenix"] {
    border-color: #fff0a1;
    background: linear-gradient(165deg, #fff078, var(--gf-accent) 28%, #791d36 70%, #251638);
    clip-path: polygon(18% 0, 82% 0, 100% 32%, 82% 48%, 100% 88%, 68% 82%, 50% 100%, 32% 82%, 0 88%, 18% 48%, 0 32%);
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--gf-accent), transparent 25%));
}

.gf-avatar-item[data-slot="costume"][data-visual*="frost-valkyrie"],
.gf-avatar-item[data-slot="costume"][data-visual*="rose-seraph"],
.gf-avatar-item[data-slot="costume"][data-visual*="lunar-moth"] {
    border-radius: 30px 30px 45% 45%;
    background: linear-gradient(145deg, var(--gf-cosmetic-2), var(--gf-accent) 44%, color-mix(in srgb, var(--gf-accent), #202254 55%));
    clip-path: polygon(20% 0, 80% 0, 98% 28%, 78% 45%, 92% 100%, 50% 83%, 8% 100%, 22% 45%, 2% 28%);
}

.gf-avatar-item[data-slot="costume"][data-visual*="void-reaper"],
.gf-avatar-item[data-slot="costume"][data-visual*="shadow-ninja"] {
    border-color: var(--gf-cosmetic-2);
    background: linear-gradient(150deg, #171328, var(--gf-accent) 55%, #070812);
    clip-path: polygon(10% 0, 90% 0, 100% 36%, 78% 47%, 94% 94%, 70% 84%, 58% 100%, 46% 83%, 27% 97%, 7% 88%, 21% 47%, 0 36%);
}

.gf-avatar-item[data-slot="hair"]::before {
    content: "";
    position: absolute;
    inset: 12% 2% 0;
    background: linear-gradient(150deg, var(--gf-cosmetic-2, #fff), var(--gf-accent));
    clip-path: polygon(0 68%, 12% 18%, 32% 38%, 48% 0, 62% 35%, 86% 12%, 100% 66%, 81% 54%, 73% 100%, 27% 100%, 20% 56%);
    filter: drop-shadow(0 0 7px color-mix(in srgb, var(--gf-accent), transparent 30%));
}

.gf-avatar-item[data-slot="hair"][data-visual*="braid"]::before,
.gf-avatar-item[data-slot="hair"][data-visual*="fox-spirit"]::before {
    inset: 4% -8% -22%;
    border-radius: 48% 48% 32% 32%;
    clip-path: polygon(10% 50%, 3% 8%, 34% 25%, 50% 0, 66% 25%, 97% 8%, 90% 50%, 100% 100%, 72% 70%, 59% 100%, 50% 70%, 40% 100%, 27% 70%, 0 100%);
}

.gf-avatar-item[data-slot="hair"][data-visual*="antennae"]::before {
    inset: -14% 12% 12%;
    border: 4px solid var(--gf-cosmetic-2);
    border-bottom: 0;
    border-radius: 50% 50% 0 0;
    background: transparent;
    clip-path: none;
}

.gf-avatar-item[data-slot="head"][data-visual*="cap"]::before {
    inset: 30% 2% 8%;
    border-radius: 55% 55% 18% 18%;
    background: linear-gradient(145deg, var(--gf-cosmetic-2), var(--gf-accent));
    clip-path: polygon(8% 28%, 42% 5%, 81% 17%, 94% 55%, 100% 63%, 58% 68%, 42% 100%, 10% 78%);
}

.gf-avatar-item[data-slot="head"][data-visual*="helm"]::before,
.gf-avatar-item[data-slot="head"][data-visual*="kabuto"]::before {
    inset: 4% 0 -3%;
    border-radius: 50% 50% 28% 28%;
    background: linear-gradient(145deg, var(--gf-cosmetic-2), var(--gf-accent) 44%, #242750);
    clip-path: polygon(4% 72%, 12% 24%, 36% 14%, 50% 0, 64% 14%, 89% 24%, 96% 72%, 78% 58%, 70% 100%, 30% 100%, 22% 58%);
}

.gf-avatar-item[data-slot="head"][data-visual*="hood"]::before {
    inset: 0 -3% -12%;
    border-radius: 50% 50% 18% 18%;
    background: radial-gradient(ellipse at 50% 68%, #11101f 0 32%, transparent 34%), linear-gradient(150deg, var(--gf-accent), #090914 72%);
    clip-path: none;
}

.gf-avatar-item[data-slot="head"][data-visual*="hat"]::before {
    inset: 28% -12% auto;
    height: 32%;
    border-radius: 50%;
    background: linear-gradient(90deg, var(--gf-accent), var(--gf-cosmetic-2), var(--gf-accent));
    clip-path: none;
}

.gf-avatar-item[data-slot="face"][data-visual*="mask"],
.gf-avatar-item[data-slot="face"][data-visual*="menpo"] {
    top: 20%;
    height: 17%;
    border: 0;
    border-radius: 7px 7px 50% 50%;
    background:
        linear-gradient(90deg, transparent 12%, var(--gf-cosmetic-2) 14% 38%, transparent 40% 60%, var(--gf-cosmetic-2) 62% 86%, transparent 88%),
        linear-gradient(150deg, var(--gf-accent), #17172e);
    clip-path: polygon(0 8%, 45% 0, 50% 20%, 55% 0, 100% 8%, 87% 78%, 50% 100%, 13% 78%);
    box-shadow: 0 0 10px var(--gf-accent);
}

.gf-avatar-item[data-slot="back"][data-visual*="wings"] {
    left: -12%;
    top: 30%;
    width: 124%;
    height: 58%;
    border: 2px solid color-mix(in srgb, var(--gf-cosmetic-2), white 38%);
    border-radius: 48% 48% 12% 12%;
    background: linear-gradient(115deg, transparent 0 7%, var(--gf-accent) 8% 29%, var(--gf-cosmetic-2) 30% 42%, transparent 43% 57%, var(--gf-cosmetic-2) 58% 70%, var(--gf-accent) 71% 92%, transparent 93%);
    clip-path: polygon(50% 46%, 35% 20%, 0 0, 12% 42%, 0 82%, 36% 62%, 50% 100%, 64% 62%, 100% 82%, 88% 42%, 100% 0, 65% 20%);
    filter: drop-shadow(0 0 12px var(--gf-accent));
    animation: gf-wing-flight 1.8s ease-in-out infinite;
}

.gf-avatar-item[data-slot="back"][data-visual*="dragon-wings"] {
    clip-path: polygon(50% 50%, 35% 30%, 2% 3%, 14% 44%, 1% 68%, 35% 64%, 50% 98%, 65% 64%, 99% 68%, 86% 44%, 98% 3%, 65% 30%);
    background: linear-gradient(115deg, transparent 7%, #5b1422 8% 30%, var(--gf-accent) 31% 43%, transparent 44% 56%, var(--gf-accent) 57% 69%, #5b1422 70% 92%, transparent 93%);
}

.gf-avatar-item[data-slot="back"][data-visual*="crystal-wings"] {
    border-radius: 0;
    clip-path: polygon(50% 54%, 38% 25%, 8% 0, 18% 42%, 0 70%, 37% 65%, 50% 100%, 63% 65%, 100% 70%, 82% 42%, 92% 0, 62% 25%);
    opacity: 0.86;
}

.gf-avatar-item[data-slot="back"][data-visual*="moth-wings"] {
    border-radius: 48%;
    background: radial-gradient(circle at 22% 45%, #172038 0 6%, var(--gf-cosmetic-2) 7% 15%, var(--gf-accent) 16% 35%, transparent 36%), radial-gradient(circle at 78% 45%, #172038 0 6%, var(--gf-cosmetic-2) 7% 15%, var(--gf-accent) 16% 35%, transparent 36%);
    clip-path: polygon(50% 45%, 34% 12%, 0 3%, 8% 70%, 39% 66%, 50% 100%, 61% 66%, 92% 70%, 100% 3%, 66% 12%);
}

.gf-avatar-item[data-slot="back"][data-visual*="cape"],
.gf-avatar-item[data-slot="back"][data-visual*="mantle"],
.gf-avatar-item[data-slot="back"][data-visual*="scarf"],
.gf-avatar-item[data-slot="back"][data-visual*="streamer"] {
    left: 10%;
    width: 80%;
    border-radius: 18px 18px 45% 45%;
    background: linear-gradient(155deg, var(--gf-cosmetic-2), var(--gf-accent) 38%, #171837 88%);
    clip-path: polygon(10% 0, 90% 0, 100% 88%, 72% 70%, 58% 100%, 43% 72%, 18% 96%, 0 78%);
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--gf-accent), transparent 25%));
    transform-origin: 50% 8%;
    animation: gf-cape-flight 2.3s ease-in-out infinite;
}

.gf-avatar-item[data-slot="back"][data-visual*="nine-tail"] {
    left: -4%;
    width: 108%;
    border-radius: 48%;
    background: repeating-radial-gradient(ellipse at 50% 18%, var(--gf-cosmetic-2) 0 8%, var(--gf-accent) 9% 18%, transparent 19% 25%);
    clip-path: polygon(50% 0, 61% 32%, 86% 10%, 74% 43%, 100% 43%, 75% 61%, 94% 88%, 62% 72%, 50% 100%, 38% 72%, 6% 88%, 25% 61%, 0 43%, 26% 43%, 14% 10%, 39% 32%);
}

.gf-avatar-item[data-slot="back"][data-visual*="shield"] {
    left: 3%;
    top: 43%;
    width: 42%;
    height: 38%;
    border: 3px solid var(--gf-cosmetic-2);
    border-radius: 18px 18px 45% 45%;
    background: linear-gradient(145deg, var(--gf-accent), color-mix(in srgb, var(--gf-cosmetic-2), transparent 35%));
    clip-path: polygon(50% 0, 100% 18%, 86% 72%, 50% 100%, 14% 72%, 0 18%);
}

.gf-avatar-item[data-slot="back"][data-visual*="satchel"],
.gf-avatar-item[data-slot="back"][data-visual*="pack"] {
    left: 13%;
    top: 46%;
    width: 42%;
    height: 35%;
    border: 3px solid color-mix(in srgb, var(--gf-cosmetic-2), white 28%);
    border-radius: 12px 12px 18px 18px;
    background: linear-gradient(145deg, var(--gf-cosmetic-2), var(--gf-accent));
    clip-path: none;
}

.gf-avatar-item[data-slot="hand"][data-visual*="wand"],
.gf-avatar-item[data-slot="hand"][data-visual*="quill"] {
    width: 13%;
    height: 44%;
    border: 0;
    border-radius: 999px 999px 20% 20%;
    background: linear-gradient(90deg, var(--gf-accent), var(--gf-cosmetic-2), var(--gf-accent));
    box-shadow: 0 0 15px var(--gf-accent);
    transform: rotate(24deg);
}

.gf-avatar-item[data-slot="hand"][data-visual*="disc"] {
    border-radius: 18%;
    background: repeating-radial-gradient(circle, var(--gf-cosmetic-2) 0 8%, var(--gf-accent) 9% 20%, #171832 21% 30%);
}

.gf-avatar-item[data-slot="hand"][data-visual*="gauntlet"] {
    border-radius: 45% 45% 18% 18%;
    background: linear-gradient(135deg, var(--gf-cosmetic-2), var(--gf-accent), #20254f);
    clip-path: polygon(12% 0, 88% 0, 100% 56%, 72% 100%, 28% 100%, 0 56%);
}

.gf-avatar-item[data-slot="aura"]::before,
.gf-avatar-item[data-slot="aura"]::after {
    content: "";
    position: absolute;
    inset: 10%;
    border: 2px solid var(--gf-cosmetic-2, var(--gf-accent));
    border-radius: inherit;
    opacity: 0.62;
}

.gf-avatar-item[data-slot="aura"]::after {
    inset: 24%;
    border-style: dotted;
    transform: rotate(24deg);
}

.gf-avatar-item[data-slot="aura"][data-visual*="electric"] {
    border: 0;
    border-radius: 0;
    background: var(--gf-cosmetic-2);
    clip-path: polygon(48% 0, 59% 34%, 86% 18%, 67% 48%, 100% 52%, 68% 64%, 86% 94%, 57% 75%, 44% 100%, 39% 69%, 8% 88%, 28% 59%, 0 44%, 34% 42%);
    filter: drop-shadow(0 0 10px var(--gf-accent));
    animation: gf-electric-jolt 0.72s steps(2, end) infinite;
}

.gf-avatar-item[data-slot="aura"][data-visual*="wildfire"],
.gf-avatar-item[data-slot="aura"][data-visual*="inferno"],
.gf-avatar-item[data-slot="aura"][data-visual*="spirit-flame"] {
    border: 0;
    border-radius: 45% 55% 48% 52%;
    background: radial-gradient(ellipse at 50% 70%, transparent 0 38%, var(--gf-cosmetic-2) 40% 48%, var(--gf-accent) 50% 68%, transparent 70%);
    clip-path: polygon(50% 0, 64% 25%, 76% 10%, 75% 42%, 96% 32%, 84% 66%, 100% 83%, 67% 80%, 50% 100%, 34% 80%, 0 83%, 17% 62%, 4% 31%, 28% 43%, 28% 12%);
    filter: drop-shadow(0 0 13px var(--gf-accent));
    animation: gf-flame-rise 0.95s ease-in-out infinite alternate;
}

.gf-avatar-item[data-slot="aura"][data-visual*="blizzard"] {
    border-width: 5px 2px;
    border-style: dotted dashed;
    border-radius: 38% 62%;
    background: repeating-conic-gradient(from 20deg, transparent 0 12deg, color-mix(in srgb, var(--gf-cosmetic-2), transparent 58%) 13deg 17deg, transparent 18deg 42deg);
    animation: gf-aura-spin 4.2s linear infinite;
}

.gf-avatar-item[data-slot="aura"][data-visual*="void"] {
    border: 5px double var(--gf-cosmetic-2);
    background: radial-gradient(circle, transparent 0 52%, #0b0618 54% 62%, color-mix(in srgb, var(--gf-accent), transparent 25%) 64% 72%, transparent 74%);
    box-shadow: 0 0 24px var(--gf-accent), inset 0 0 25px #05030b;
    animation: gf-void-warp 2.4s ease-in-out infinite;
}

.gf-avatar-item[data-slot="aura"][data-visual*="tidal"] {
    border-width: 3px 8px;
    border-radius: 42% 58% 48% 52%;
    background: repeating-radial-gradient(ellipse at 50% 75%, transparent 0 11%, color-mix(in srgb, var(--gf-cosmetic-2), transparent 54%) 12% 15%, transparent 16% 24%);
    animation: gf-tidal-flow 2.1s ease-in-out infinite;
}

.gf-avatar-item[data-slot="aura"][data-visual*="cyclone"] {
    border-width: 2px 8px 5px 1px;
    border-style: solid dashed;
    border-radius: 50% 36% 52% 34%;
    animation: gf-aura-spin 2.2s linear infinite;
}

.gf-avatar-item[data-slot="aura"][data-visual*="rose-petal"] {
    border: 0;
    background: repeating-conic-gradient(from 12deg, transparent 0 18deg, var(--gf-accent) 19deg 24deg, transparent 25deg 46deg);
    border-radius: 50%;
    filter: drop-shadow(0 0 8px var(--gf-cosmetic-2));
    animation: gf-aura-spin 7s linear infinite;
}

.gf-avatar-item[data-slot="aura"][data-visual*="chrono"] {
    border: 5px double var(--gf-accent);
    background: conic-gradient(from 0deg, var(--gf-cosmetic-2) 0 2deg, transparent 3deg 30deg, var(--gf-accent) 31deg 33deg, transparent 34deg 60deg);
    border-radius: 50%;
    animation: gf-clock-tick 6s steps(12, end) infinite;
}

.gf-avatar-item[data-slot="aura"][data-visual*="smoke"] {
    border: 0;
    border-radius: 46%;
    background: radial-gradient(circle at 30% 25%, rgba(177, 96, 255, 0.52), transparent 24%), radial-gradient(circle at 72% 48%, rgba(69, 66, 100, 0.88), transparent 30%), radial-gradient(circle at 36% 76%, rgba(25, 24, 45, 0.9), transparent 34%);
    filter: blur(3px) drop-shadow(0 0 9px var(--gf-accent));
    animation: gf-smoke-drift 3.2s ease-in-out infinite;
}

.gf-avatar-item[data-slot="aura"][data-visual*="moon-dust"] {
    border: 3px dotted var(--gf-cosmetic-2);
    background: radial-gradient(circle at 20% 28%, #fff 0 1%, transparent 2%), radial-gradient(circle at 78% 18%, #fff 0 2%, transparent 3%), radial-gradient(circle at 83% 72%, var(--gf-cosmetic-2) 0 1.5%, transparent 2.5%), radial-gradient(circle at 25% 82%, var(--gf-accent) 0 2%, transparent 3%);
    animation: gf-aura-spin 9s linear infinite;
}

.gf-avatar-item[data-slot="aura"][data-visual*="spark"] { border-style: dashed; animation-duration: 1.2s; }
.gf-avatar-item[data-slot="aura"][data-visual*="runes"] { border-width: 5px; border-style: double dotted; border-radius: 18%; animation: gf-aura-spin 8s linear infinite; }
.gf-avatar-item[data-slot="aura"][data-visual*="cloud"] { border-width: 8px 2px; border-style: dotted; border-radius: 42%; animation: gf-tidal-flow 3.6s ease-in-out infinite; }
.gf-avatar-item[data-slot="aura"][data-visual*="prism"] { border-color: #5ff #f7c #ff8 #7f9; border-width: 5px; transform: rotate(45deg); }
.gf-avatar-item[data-slot="aura"][data-visual*="wave"] { border-width: 2px 7px; border-style: dashed solid; animation: gf-aura-pulse 0.8s ease-in-out infinite; }
.gf-avatar-item[data-slot="aura"][data-visual*="ink"] { border-width: 8px 2px 5px 7px; border-radius: 38% 62% 44% 56%; animation: gf-smoke-drift 2.7s ease-in-out infinite; }
.gf-avatar-item[data-slot="aura"][data-visual*="stars"] { border-width: 5px; border-style: dotted; animation: gf-aura-spin 10s linear infinite; }

.gf-avatar-item[data-visual*="shape-lightning"] { clip-path: polygon(53% 0, 20% 48%, 45% 45%, 34% 100%, 82% 35%, 56% 39%); }
.gf-avatar-item[data-visual*="shape-fang"] { clip-path: polygon(18% 0, 82% 0, 67% 100%, 50% 76%, 33% 100%); }
.gf-avatar-item[data-visual*="shape-snowflake"] { clip-path: polygon(46% 0, 54% 0, 55% 31%, 78% 10%, 84% 16%, 63% 38%, 100% 46%, 100% 54%, 64% 55%, 86% 78%, 79% 85%, 55% 64%, 54% 100%, 46% 100%, 45% 64%, 21% 86%, 14% 79%, 36% 55%, 0 54%, 0 46%, 37% 38%, 16% 16%, 22% 10%, 45% 31%); }
.gf-avatar-item[data-visual*="shape-eclipse"] { border-radius: 50%; box-shadow: inset -18px 0 0 #090711, 0 0 16px var(--gf-accent); }
.gf-avatar-item[data-visual*="shape-fox-star"] { clip-path: polygon(50% 0, 63% 30%, 96% 12%, 81% 45%, 100% 66%, 68% 65%, 50% 100%, 32% 65%, 0 66%, 19% 45%, 4% 12%, 37% 30%); }
.gf-avatar-item[data-visual*="shape-shell"] { border-radius: 50% 50% 42% 42%; clip-path: polygon(50% 0, 68% 15%, 86% 36%, 100% 68%, 76% 100%, 24% 100%, 0 68%, 14% 36%, 32% 15%); }
.gf-avatar-item[data-visual*="shape-spiral"] { border: 8px double var(--gf-accent); border-left-color: transparent; border-radius: 50%; }
.gf-avatar-item[data-visual*="shape-heart"] { clip-path: polygon(50% 92%, 8% 50%, 3% 24%, 17% 5%, 38% 5%, 50% 20%, 62% 5%, 83% 5%, 97% 24%, 92% 50%); }
.gf-avatar-item[data-visual*="shape-hourglass"] { clip-path: polygon(12% 0, 88% 0, 66% 35%, 66% 65%, 88% 100%, 12% 100%, 34% 65%, 34% 35%); }
.gf-avatar-item[data-visual*="shape-shuriken"] { clip-path: polygon(50% 0, 61% 34%, 100% 20%, 68% 51%, 100% 80%, 61% 66%, 50% 100%, 39% 66%, 0 80%, 32% 51%, 0 20%, 39% 34%); }
.gf-avatar-item[data-visual*="shape-moon"] { border-radius: 50%; box-shadow: inset -24px 2px 0 color-mix(in srgb, var(--gf-cosmetic-2), transparent 8%), 0 0 15px var(--gf-accent); }
.gf-avatar-item[data-visual*="shape-sunburst"] { clip-path: polygon(50% 0, 58% 25%, 75% 7%, 74% 30%, 100% 25%, 80% 43%, 100% 50%, 80% 58%, 100% 75%, 74% 70%, 75% 94%, 58% 75%, 50% 100%, 42% 75%, 25% 94%, 26% 70%, 0 75%, 20% 58%, 0 50%, 20% 43%, 0 25%, 26% 30%, 25% 7%, 42% 25%); }

.gf-avatar-item[data-visual="scholar-cap"]::before,
.gf-avatar-item[data-visual="cap"]::before {
    content: "";
    position: absolute;
    inset: 26% 0 auto;
    height: 35%;
    clip-path: polygon(50% 0, 100% 40%, 50% 80%, 0 40%);
    background: linear-gradient(145deg, #343d82, #161c45);
    box-shadow: 0 6px 0 #10152f;
}

.gf-avatar-item[data-visual="headphones"]::before {
    content: "";
    position: absolute;
    inset: 29% 5% 0;
    border: 6px solid var(--gf-accent);
    border-bottom: 0;
    border-radius: 50% 50% 0 0;
}

.gf-avatar-nameplate {
    position: absolute;
    left: 50%;
    top: 94%;
    min-width: max-content;
    max-width: 150px;
    padding: 5px 9px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #fff;
    background: rgba(10, 13, 34, 0.76);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.2);
    font-size: clamp(0.56rem, 0.7vw, 0.69rem);
    font-weight: 820;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: translateX(-50%);
    backdrop-filter: blur(8px);
}

.gf-avatar-nameplate__role {
    margin-inline-start: 4px;
    color: #82ecf4;
    font-size: 0.54rem;
    text-transform: uppercase;
}

.gf-avatar-actor.is-walking .gf-avatar-rig {
    animation: gf-avatar-bob 360ms ease-in-out infinite alternate;
}

.gf-avatar-actor.is-walking .gf-avatar-leg--left {
    animation: gf-leg-stride-left 440ms ease-in-out infinite alternate;
}

.gf-avatar-actor.is-walking .gf-avatar-leg--right {
    animation: gf-leg-stride-right 440ms ease-in-out infinite alternate;
}

.gf-avatar-actor.is-walking .gf-avatar-arm--left {
    animation: gf-arm-stride-left 440ms ease-in-out infinite alternate;
}

.gf-avatar-actor.is-walking .gf-avatar-arm--right {
    animation: gf-arm-stride-right 440ms ease-in-out infinite alternate;
}

.gf-avatar-actor.is-facing-left .gf-avatar-rig {
    transform: scaleX(-1);
}

.gf-avatar-actor.is-facing-left.is-walking .gf-avatar-rig {
    animation-name: gf-avatar-bob-left;
}

/* Side panels ------------------------------------------------------------ */

.gf-campus-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;
    border: 0;
    background: rgba(4, 6, 20, 0.6);
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(5px);
    transition: opacity 220ms ease, visibility 220ms ease;
}

.gf-campus-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

.gf-campus-panel {
    position: fixed;
    inset-block: 14px;
    inset-inline-end: 14px;
    z-index: 1100;
    width: min(460px, calc(100% - 28px));
    overflow: hidden;
    border: 1px solid rgba(210, 204, 255, 0.22);
    border-radius: 30px;
    color: var(--gf-text);
    background:
        linear-gradient(145deg, rgba(28, 34, 73, 0.96), rgba(12, 16, 42, 0.98)),
        #121630;
    box-shadow: -26px 0 80px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateX(calc(100% + 30px));
    transition: transform 360ms var(--gf-campus-ease), opacity 220ms ease, visibility 220ms ease;
    font-family: var(--gf-active-room-font, var(--gf-campus-font, inherit));
}

[dir="rtl"] .gf-campus-panel {
    transform: translateX(calc(-100% - 30px));
}

.gf-campus-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.gf-campus-panel__inner {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.gf-campus-panel__header {
    position: sticky;
    inset-block-start: 0;
    z-index: 3;
    padding: 22px 22px 17px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid var(--gf-line);
    background: rgba(18, 23, 52, 0.92);
    backdrop-filter: blur(18px);
}

.gf-campus-panel__header h2 {
    margin: 4px 0 0;
    color: #fff;
    font-size: 1.5rem;
}

.gf-campus-panel__close {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid var(--gf-line);
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.gf-campus-panel__body {
    padding: 22px;
}

.gf-campus-panel__room-presence {
    margin: 16px 22px 0;
    padding: 9px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    border: 1px solid rgba(118, 218, 242, 0.17);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.045);
}

.gf-campus-panel__room-presence[hidden] {
    display: none;
}

.gf-campus-panel__room-presence span {
    padding: 8px 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 11px;
    color: #dfe9f6;
    background: rgba(79, 206, 235, 0.09);
    font-size: 0.69rem;
    font-weight: 760;
}

.gf-campus-panel__room-presence span:last-child {
    background: rgba(255, 197, 99, 0.09);
}

.gf-campus-panel__room-presence i {
    color: #75e3f7;
}

.gf-campus-panel__room-presence span:last-child i {
    color: #ffd27d;
}

.gf-campus-panel__room-presence strong {
    color: #fff;
    font-size: 0.88rem;
}

.gf-room-summary {
    margin-bottom: 20px;
    padding: 18px;
    border: 1px solid var(--gf-line);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(18, 23, 52, 0.82), rgba(18, 23, 52, 0.92)),
        var(--gf-room-summary-theme, linear-gradient(transparent, transparent)) center / cover;
}

.gf-room-summary p {
    margin: 0;
    color: var(--gf-muted);
    line-height: 1.7;
}

.gf-room-summary h3 {
    margin: 8px 0 10px;
    color: #fff;
    font-size: 1.28rem;
}

.gf-room-missions {
    display: grid;
    gap: 10px;
}

.gf-room-mission {
    padding: 14px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--gf-line);
    border-radius: 18px;
    color: #fff;
    background: rgba(255, 255, 255, 0.055);
}

.gf-room-mission:hover {
    color: #fff;
    border-color: rgba(75, 217, 231, 0.48);
    background: rgba(95, 79, 212, 0.18);
    transform: translateX(3px);
}

[dir="rtl"] .gf-room-mission:hover {
    transform: translateX(-3px);
}

.gf-room-mission__icon {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--gf-violet), var(--gf-cyan));
}

.gf-room-mission strong,
.gf-room-mission span {
    display: block;
}

.gf-room-mission span {
    margin-top: 3px;
    color: var(--gf-muted);
    font-size: 0.72rem;
}

/* Avatar studio ---------------------------------------------------------- */

.gf-avatar-page__studio {
    padding: clamp(18px, 3vw, 34px);
    border: 1px solid var(--gf-line);
    border-radius: 34px;
    background: linear-gradient(145deg, rgba(31, 38, 83, 0.92), rgba(13, 17, 43, 0.96));
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.32);
}

.gf-avatar-page__studio > .gf-avatar-studio {
    display: grid;
    grid-template-columns: minmax(280px, 0.78fr) minmax(420px, 1.22fr);
    grid-template-areas: "preview collection" "appearance collection";
    gap: 22px;
    align-items: start;
}

.gf-avatar-page__studio .gf-avatar-studio-preview { grid-area: preview; margin: 0; }
.gf-avatar-page__studio .gf-avatar-appearance { grid-area: appearance; }
.gf-avatar-page__studio .gf-avatar-collection { grid-area: collection; }

.gf-avatar-appearance,
.gf-avatar-collection {
    padding: 18px;
    border: 1px solid var(--gf-line);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.05);
}

.gf-avatar-appearance {
    margin-bottom: 20px;
}

.gf-avatar-section-heading {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.gf-avatar-section-heading > div > span {
    color: var(--gf-cyan);
    font-size: 0.64rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gf-avatar-section-heading h3 {
    margin: 3px 0 0;
    color: #fff;
    font-size: 1.15rem;
}

.gf-avatar-section-heading > i {
    color: var(--gf-gold);
    font-size: 1.4rem;
}

.gf-avatar-owned-count {
    padding: 7px 10px;
    border-radius: 999px;
    color: #fff;
    background: rgba(124, 92, 255, 0.3);
    font-size: 0.7rem;
    font-weight: 850;
}

.gf-avatar-collection__status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.gf-avatar-wallet {
    min-height: 32px;
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255, 200, 87, 0.38);
    border-radius: 999px;
    color: #ffe8a8;
    background: linear-gradient(135deg, rgba(255, 200, 87, 0.16), rgba(124, 92, 255, 0.16));
    font-size: 0.65rem;
}

.gf-avatar-wallet i { color: var(--gf-gold); }
.gf-avatar-wallet strong { color: #fff; font-size: 0.75rem; }

.gf-avatar-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.gf-avatar-form-grid label > span {
    margin-bottom: 6px;
    display: block;
    color: var(--gf-muted);
    font-size: 0.68rem;
    font-weight: 780;
}

.gf-avatar-form-grid label > small {
    margin-top: 5px;
    display: block;
    color: var(--gf-muted);
    font-size: 0.58rem;
    line-height: 1.4;
}

.gf-avatar-form-grid :is(select, input[type="color"]) {
    width: 100%;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid var(--gf-line);
    border-radius: 13px;
    color: #fff;
    background: #1a2047;
    outline: none;
}

.gf-avatar-form-grid input[type="color"] {
    padding: 5px;
    cursor: pointer;
}

.gf-avatar-form-grid :is(select, input):focus-visible {
    border-color: var(--gf-cyan);
    box-shadow: 0 0 0 3px rgba(37, 198, 218, 0.15);
}

.gf-avatar-save {
    width: 100%;
    min-height: 44px;
    margin-top: 14px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--gf-violet), var(--gf-cyan));
    box-shadow: 0 12px 28px rgba(74, 65, 204, 0.28);
    font-size: 0.76rem;
    font-weight: 850;
}

.gf-avatar-save:disabled {
    cursor: wait;
    opacity: 0.65;
}

.gf-avatar-catalog-empty {
    grid-column: 1 / -1;
    padding: 24px;
    color: var(--gf-muted);
    text-align: center;
}

.gf-avatar-catalog-empty i {
    color: var(--gf-cyan);
    font-size: 2rem;
}

.gf-avatar-catalog-empty p {
    margin: 9px 0 0;
}

.gf-avatar-studio-preview {
    min-height: 290px;
    margin-bottom: 20px;
    display: grid;
    place-items: center;
    border: 1px solid var(--gf-line);
    border-radius: 26px;
    background:
        radial-gradient(circle at 50% 38%, rgba(119, 91, 255, 0.36), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(35, 184, 203, 0.07));
}

.gf-avatar-studio-preview .gf-avatar-actor {
    position: relative;
    left: auto;
    top: auto;
    width: 132px;
    transform: none;
}

.gf-avatar-studio-preview .gf-avatar-nameplate {
    display: none;
}

.gf-avatar-tabs {
    margin-bottom: 16px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 5px;
}

.gf-avatar-tab {
    padding: 8px 12px;
    border: 1px solid var(--gf-line);
    border-radius: 999px;
    color: var(--gf-muted);
    background: transparent;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.gf-avatar-tab.is-active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--gf-violet), var(--gf-cyan));
}

.gf-avatar-catalog-controls {
    margin-bottom: 15px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: 9px;
    align-items: end;
}

.gf-avatar-catalog-controls label > span {
    margin-bottom: 5px;
    display: block;
    color: var(--gf-muted);
    font-size: 0.62rem;
    font-weight: 800;
}

.gf-avatar-catalog-controls select,
.gf-avatar-clear-preview {
    width: 100%;
    min-height: 38px;
    padding: 7px 10px;
    border: 1px solid var(--gf-line);
    border-radius: 12px;
    color: #f7f8ff;
    background: #1a2047;
    font: inherit;
    font-size: 0.66rem;
    font-weight: 760;
}

.gf-avatar-clear-preview {
    width: auto;
    color: #c9fbff;
    cursor: pointer;
    background: rgba(37, 198, 218, 0.12);
}

.gf-avatar-clear-preview[hidden] { display: none; }

.gf-avatar-catalog-controls > p {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--gf-muted);
    font-size: 0.62rem;
}

.gf-avatar-catalog {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.gf-avatar-pagination {
    margin-top: 14px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        'previous pages next'
        '. status .';
    gap: 8px 10px;
    align-items: center;
}

.gf-avatar-pagination[hidden] {
    display: none !important;
}

.gf-avatar-pagination__arrow,
.gf-avatar-pagination__page {
    min-height: 38px;
    border: 1px solid var(--gf-line);
    border-radius: 12px;
    color: #e8ebff;
    background: rgba(255, 255, 255, 0.055);
    font: inherit;
    font-size: 0.68rem;
    font-weight: 850;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.gf-avatar-pagination__arrow {
    min-width: 96px;
    padding: 7px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.gf-avatar-pagination__arrow:first-of-type { grid-area: previous; }
.gf-avatar-pagination__arrow:last-of-type { grid-area: next; }

.gf-avatar-pagination__pages {
    grid-area: pages;
    display: flex;
    justify-content: center;
    gap: 5px;
    overflow-x: auto;
    padding: 2px;
    scrollbar-width: thin;
}

.gf-avatar-pagination__page {
    width: 36px;
    min-width: 36px;
    padding: 0;
}

.gf-avatar-pagination__page.is-active,
.gf-avatar-pagination__page[aria-current='page'] {
    border-color: transparent;
    color: #fff;
    background: linear-gradient(135deg, var(--gf-violet), var(--gf-cyan));
    box-shadow: 0 8px 22px rgba(67, 91, 225, 0.24);
}

.gf-avatar-pagination__arrow:hover:not(:disabled),
.gf-avatar-pagination__page:hover:not(:disabled),
.gf-avatar-pagination__arrow:focus-visible,
.gf-avatar-pagination__page:focus-visible {
    border-color: rgba(87, 222, 235, 0.5);
    transform: translateY(-1px);
}

.gf-avatar-pagination__arrow:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

.gf-avatar-pagination__status {
    grid-area: status;
    color: var(--gf-muted);
    font-size: 0.64rem;
    font-weight: 780;
    text-align: center;
}

.gf-avatar-item-card {
    --gf-rarity-color: #a7aec8;
    --gf-item-preview: #7c5cff;
    position: relative;
    min-height: 156px;
    padding: 14px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--gf-rarity-color), transparent 55%);
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--gf-rarity-color), transparent 73%), transparent 45%),
        rgba(255, 255, 255, 0.055);
}

.gf-avatar-item-card[data-rarity="uncommon"] { --gf-rarity-color: #4cdfa1; }
.gf-avatar-item-card[data-rarity="rare"] { --gf-rarity-color: #48a8ff; }
.gf-avatar-item-card[data-rarity="epic"] { --gf-rarity-color: #af6dff; }
.gf-avatar-item-card[data-rarity="legendary"] { --gf-rarity-color: #ffc857; }

.gf-avatar-item-card__visual {
    position: relative;
    width: 68px;
    height: 68px;
    margin: 0 auto 10px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--gf-rarity-color), white 20%);
    border-radius: 17px;
    color: var(--gf-rarity-color);
    background:
        radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.7), transparent 13%),
        linear-gradient(145deg, color-mix(in srgb, var(--gf-item-preview), white 18%), color-mix(in srgb, var(--gf-item-preview), #111735 64%));
    font-size: 1.5rem;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--gf-rarity-color), transparent 80%);
    animation: gf-avatar-thumbnail-float 3.2s ease-in-out infinite;
}

.gf-avatar-item-card__visual::after {
    content: "";
    position: absolute;
    inset: 2px;
    z-index: 2;
    border-radius: inherit;
    background: linear-gradient(115deg, transparent 22%, rgba(255, 255, 255, 0.32) 43%, transparent 61%);
    pointer-events: none;
    transform: translateX(-120%);
    animation: gf-avatar-thumbnail-shine 3.8s ease-in-out infinite;
}

.gf-avatar-item-card__visual .gf-avatar-item--preview {
    position: absolute;
    inset: 7px;
    width: auto;
    height: auto;
    z-index: 1;
    opacity: 0.92;
    transform: none;
}

.gf-avatar-item-card__visual .gf-avatar-item--preview[data-slot="head"],
.gf-avatar-item-card__visual .gf-avatar-item--preview[data-slot="hair"] {
    inset: 7px 5px 2px;
}

.gf-avatar-item-card__visual .gf-avatar-item--preview[data-slot="face"] {
    inset: 18px 5px 17px;
    width: auto;
    height: auto;
}

.gf-avatar-item-card__visual .gf-avatar-item--preview[data-slot="top"],
.gf-avatar-item-card__visual .gf-avatar-item--preview[data-slot="bottom"],
.gf-avatar-item-card__visual .gf-avatar-item--preview[data-slot="feet"] {
    inset: 8px 7px;
    width: auto;
    height: auto;
}

.gf-avatar-item-card__visual .gf-avatar-item--preview[data-slot="back"],
.gf-avatar-item-card__visual .gf-avatar-item--preview[data-slot="costume"],
.gf-avatar-item-card__visual .gf-avatar-item--preview[data-slot="shape"],
.gf-avatar-item-card__visual .gf-avatar-item--preview[data-slot="aura"] {
    inset: 4px;
    width: auto;
    height: auto;
}

.gf-avatar-item-card__visual .gf-avatar-item--preview[data-slot="hand"] {
    inset: 10px;
    width: auto;
    height: auto;
}

.gf-avatar-item-card strong,
.gf-avatar-item-card small {
    display: block;
    text-align: center;
}

.gf-avatar-item-card strong {
    overflow: hidden;
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gf-avatar-item-card small {
    margin-top: 3px;
    color: var(--gf-rarity-color);
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.gf-avatar-item-card__action {
    width: 100%;
    min-height: 32px;
    margin-top: 10px;
    border: 1px solid color-mix(in srgb, var(--gf-rarity-color), transparent 45%);
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.66rem;
    font-weight: 830;
}

.gf-avatar-item-card__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.gf-avatar-item-card__action--preview {
    color: #c8fbff;
    border-color: rgba(67, 220, 236, 0.42);
}

.gf-avatar-item-card__action--preview.is-previewing {
    color: #08152d;
    background: linear-gradient(135deg, #72ecf5, #8d9fff);
}

.gf-avatar-item-card__action:hover:not([disabled]) {
    background: color-mix(in srgb, var(--gf-rarity-color), transparent 65%);
}

.gf-avatar-item-card__action[disabled] {
    color: #c2c3d6;
    cursor: not-allowed;
    opacity: 0.72;
}

.gf-avatar-item-card.is-equipped {
    box-shadow: 0 0 0 2px var(--gf-rarity-color), 0 18px 40px color-mix(in srgb, var(--gf-rarity-color), transparent 80%);
}

.gf-avatar-item-card.is-previewing {
    box-shadow: 0 0 0 2px #64ddeb, 0 18px 40px rgba(56, 211, 230, 0.18);
}

@keyframes gf-avatar-thumbnail-float {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-4px) rotate(1deg); }
}

@keyframes gf-avatar-thumbnail-shine {
    0%, 32% { transform: translateX(-120%); }
    62%, 100% { transform: translateX(120%); }
}

.gf-avatar-coming-soon {
    margin-top: 18px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px dashed rgba(255, 200, 87, 0.5);
    border-radius: 18px;
    color: #ffe2a3;
    background: rgba(255, 200, 87, 0.08);
    font-size: 0.75rem;
    line-height: 1.55;
}

.gf-avatar-coming-soon--pilot {
    border-style: solid;
    border-color: rgba(47, 215, 196, 0.38);
    color: #c8fff7;
    background: linear-gradient(135deg, rgba(47, 215, 196, 0.09), rgba(124, 92, 255, 0.1));
}

/* Campus chat ------------------------------------------------------------ */

.gf-campus-chat {
    position: fixed;
    right: clamp(12px, 2vw, 26px);
    bottom: clamp(12px, 2vw, 24px);
    z-index: 1080;
    width: min(360px, calc(100vw - 24px));
    height: min(310px, calc(100vh - 120px));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    overflow: hidden;
    border: 1px solid rgba(136, 154, 255, 0.34);
    border-radius: 22px;
    color: #f7f8ff;
    background:
        radial-gradient(circle at 100% 0, rgba(65, 218, 230, 0.16), transparent 36%),
        rgba(12, 16, 42, 0.95);
    box-shadow: 0 24px 70px rgba(2, 5, 24, 0.46), inset 0 1px rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px);
    transition: height 260ms var(--gf-campus-ease), transform 220ms var(--gf-campus-ease);
}

[dir="rtl"] .gf-campus-chat {
    right: auto;
    left: clamp(12px, 2vw, 26px);
}

.gf-campus-chat[data-size="1"] {
    height: min(450px, calc(100vh - 92px));
}

.gf-campus-chat[data-size="2"] {
    height: min(600px, calc(100vh - 56px));
}

.gf-campus-stage-shell:fullscreen > .gf-campus-chat,
.gf-campus-stage-shell:-webkit-full-screen > .gf-campus-chat,
.gf-campus-stage-shell.is-campus-fullscreen-fallback > .gf-campus-chat {
    position: absolute;
    right: clamp(12px, 2vw, 26px);
    bottom: clamp(12px, 2vw, 24px);
    left: auto;
    z-index: 1080;
}

.gf-campus-chat__header {
    min-height: 64px;
    padding: 11px 12px 11px 15px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    background: linear-gradient(135deg, rgba(124, 92, 255, 0.2), rgba(47, 215, 196, 0.08));
}

.gf-campus-chat__actions {
    display: flex;
    gap: 6px;
}

.gf-campus-chat__status {
    width: 10px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #4cdfa1;
    box-shadow: 0 0 0 5px rgba(76, 223, 161, 0.12), 0 0 15px rgba(76, 223, 161, 0.68);
}

.gf-campus-chat__header strong,
.gf-campus-chat__header small {
    display: block;
}

.gf-campus-chat__header strong {
    font-size: 0.84rem;
    font-weight: 900;
}

.gf-campus-chat__header small {
    margin-top: 1px;
    color: #afb7d8;
    font-size: 0.63rem;
}

.gf-campus-chat__resize {
    width: 38px;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    color: #e9ebff;
    background: rgba(255, 255, 255, 0.075);
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.gf-campus-chat__resize:hover,
.gf-campus-chat__resize:focus-visible {
    border-color: rgba(77, 225, 226, 0.58);
    background: rgba(77, 225, 226, 0.13);
    transform: translateY(-1px);
}

.gf-campus-chat__messages {
    min-height: 0;
    padding: 13px;
    overflow-x: hidden;
    overflow-y: scroll;
    overscroll-behavior: contain;
    scrollbar-color: rgba(124, 92, 255, 0.72) rgba(255, 255, 255, 0.045);
    scrollbar-width: thin;
}

.gf-campus-chat__messages::-webkit-scrollbar { width: 7px; }
.gf-campus-chat__messages::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); }
.gf-campus-chat__messages::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(124, 92, 255, 0.72); }

.gf-campus-chat__empty {
    margin: 34px auto;
    max-width: 230px;
    color: #9fa8ca;
    font-size: 0.72rem;
    line-height: 1.55;
    text-align: center;
}

.gf-campus-chat__message {
    width: fit-content;
    max-width: 88%;
    margin: 0 0 10px;
    padding: 9px 11px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 6px 16px 16px;
    background: rgba(255, 255, 255, 0.075);
    box-shadow: 0 8px 20px rgba(2, 5, 22, 0.16);
}

.gf-campus-chat__message.is-current {
    margin-inline-start: auto;
    border-color: rgba(91, 224, 226, 0.22);
    border-radius: 16px 6px 16px 16px;
    background: linear-gradient(135deg, rgba(99, 76, 221, 0.62), rgba(37, 164, 175, 0.52));
}

.gf-campus-chat__message > div {
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gf-campus-chat__message strong {
    color: #bffaff;
    font-size: 0.62rem;
    font-weight: 900;
}

.gf-campus-chat__message time {
    color: rgba(221, 225, 246, 0.58);
    font-size: 0.54rem;
}

.gf-campus-chat__message p {
    margin: 0;
    overflow-wrap: anywhere;
    color: #f5f6ff;
    font-size: 0.72rem;
    line-height: 1.45;
    white-space: pre-wrap;
}

.gf-campus-chat__message .gf-chat-report {
    margin-top: 5px;
    padding: 2px 7px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: transparent;
    color: rgba(245, 246, 255, 0.72);
    font-size: 0.55rem;
    cursor: pointer;
}

.gf-campus-chat__message.has-image {
    width: min(88%, 270px);
    padding: 7px;
}

.gf-campus-chat__message.has-image > div,
.gf-campus-chat__message.has-image > p {
    padding-inline: 4px;
}

.gf-campus-chat__image {
    width: 100%;
    max-height: 220px;
    padding: 0;
    display: block;
    overflow: hidden;
    border: 0;
    border-radius: 12px;
    background: rgba(3, 6, 24, 0.78);
    cursor: zoom-in;
}

.gf-campus-chat__image img {
    width: 100%;
    max-height: 220px;
    display: block;
    object-fit: cover;
    transition: transform 190ms ease, filter 190ms ease;
}

.gf-campus-chat__image:hover img,
.gf-campus-chat__image:focus-visible img {
    filter: brightness(1.08) saturate(1.06);
    transform: scale(1.025);
}

.gf-campus-chat__feedback {
    min-height: 0;
    margin: 0;
    padding: 0 13px;
    color: #ff9db4;
    font-size: 0.6rem;
}

.gf-campus-chat__feedback:not(:empty) {
    min-height: 24px;
    padding-block: 5px;
}

.gf-campus-chat__form {
    padding: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(5, 8, 28, 0.5);
}

.gf-campus-chat__form:has(.gf-campus-chat__attach) {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.gf-campus-chat__attach {
    width: 42px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 14px;
    color: #c7f9ff;
    background: rgba(255, 255, 255, 0.065);
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.gf-campus-chat__attach:hover,
.gf-campus-chat__attach:focus-within {
    border-color: rgba(78, 225, 226, 0.62);
    background: rgba(78, 225, 226, 0.12);
    transform: translateY(-1px);
}

.gf-campus-chat__attach input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.gf-campus-chat__selected-image {
    grid-column: 1 / -1;
    min-width: 0;
    padding: 6px 8px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(78, 225, 226, 0.2);
    border-radius: 10px;
    color: #dffcff;
    background: rgba(78, 225, 226, 0.08);
    font-size: 0.62rem;
}

.gf-campus-chat__selected-image[hidden] {
    display: none !important;
}

.gf-campus-chat__selected-image > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gf-campus-chat__selected-image button {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.gf-campus-chat__form textarea {
    width: 100%;
    min-height: 42px;
    max-height: 92px;
    padding: 10px 12px;
    resize: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    outline: 0;
    color: #fff;
    background: rgba(255, 255, 255, 0.065);
    font: inherit;
    font-size: 0.72rem;
    line-height: 1.45;
}

.gf-campus-chat__form textarea:focus {
    border-color: rgba(78, 225, 226, 0.62);
    box-shadow: 0 0 0 3px rgba(78, 225, 226, 0.1);
}

.gf-campus-chat__form button {
    width: 42px;
    aspect-ratio: 1;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--gf-violet), var(--gf-cyan));
    box-shadow: 0 8px 22px rgba(80, 105, 228, 0.32);
}

.gf-campus-chat__form button:disabled { cursor: wait; opacity: 0.58; }

.gf-campus-chat__form .gf-campus-chat__selected-image button {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

.gf-campus-chat[data-minimized="true"] {
    height: 64px !important;
    grid-template-rows: 64px 0 0 0;
}

.gf-campus-chat[data-minimized="true"] :where(.gf-campus-chat__messages, .gf-campus-chat__feedback, .gf-campus-chat__form) {
    visibility: hidden;
}

/* Campus-centered chat image viewer ------------------------------------ */

.gf-chat-image-viewer {
    position: absolute;
    inset: 0;
    z-index: 235;
    display: grid;
    place-items: center;
    padding: clamp(22px, 5vw, 64px);
    cursor: default;
}

.gf-chat-image-viewer[hidden] {
    display: none !important;
}

.gf-chat-image-viewer__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(3, 6, 24, 0.78);
    backdrop-filter: blur(9px) saturate(75%);
    cursor: zoom-out;
    animation: gf-chat-image-backdrop-in 220ms ease both;
}

.gf-chat-image-viewer__frame {
    position: relative;
    z-index: 1;
    width: fit-content;
    max-width: min(82%, 980px);
    max-height: 82%;
    margin: 0;
    display: grid;
    justify-items: center;
    gap: 8px;
}

.gf-chat-image-viewer__frame > img {
    width: auto;
    max-width: 100%;
    max-height: min(70vh, 720px);
    display: block;
    object-fit: contain;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 18px;
    background: #080c25;
    box-shadow: 0 36px 100px rgba(0, 0, 0, 0.66), 0 0 54px rgba(81, 217, 235, 0.2);
    transform-origin: center;
}

.gf-chat-image-viewer__frame figcaption {
    max-width: min(680px, 100%);
    padding: 7px 12px;
    border-radius: 999px;
    color: #f5f7ff;
    background: rgba(8, 12, 38, 0.84);
    font-size: 0.72rem;
    text-align: center;
}

.gf-chat-image-viewer__frame figcaption[hidden] {
    display: none;
}

.gf-chat-image-viewer__close {
    position: absolute;
    inset: -18px -18px auto auto;
    z-index: 2;
    width: 42px;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 50%;
    color: #fff;
    background: rgba(13, 18, 52, 0.96);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

[dir='rtl'] .gf-chat-image-viewer__close {
    inset: -18px auto auto -18px;
}

.gf-chat-image-viewer.is-closing .gf-chat-image-viewer__backdrop {
    animation: gf-chat-image-backdrop-out 240ms ease both;
}

.gf-chat-image-viewer.is-closing {
    pointer-events: none;
}

@keyframes gf-chat-image-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes gf-chat-image-backdrop-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Toast ----------------------------------------------------------------- */

.gf-campus-toast {
    position: fixed;
    inset: auto 20px 20px auto;
    z-index: 1200;
    max-width: min(360px, calc(100% - 40px));
    padding: 13px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--gf-line);
    border-radius: 16px;
    color: #fff;
    background: rgba(16, 21, 49, 0.94);
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.38);
    opacity: 0;
    pointer-events: none;
    transform: translateY(16px);
    backdrop-filter: blur(15px);
    transition: opacity 180ms ease, transform 260ms var(--gf-campus-ease);
}

[dir="rtl"] .gf-campus-toast {
    right: auto;
    left: 20px;
}

body.gf-panel-open {
    overflow: hidden;
}

.gf-campus-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.gf-campus-toast.is-error {
    border-color: rgba(255, 111, 145, 0.5);
}

.gf-token-reward-toast {
    position: fixed;
    inset-block-start: 92px;
    inset-inline-end: 22px;
    z-index: 1210;
    max-width: min(360px, calc(100% - 44px));
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255, 207, 86, 0.52);
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, rgba(35, 28, 74, 0.97), rgba(19, 73, 85, 0.96));
    box-shadow: 0 20px 58px rgba(0, 0, 0, 0.4), 0 0 28px rgba(255, 199, 65, 0.14);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-14px) scale(0.96);
    backdrop-filter: blur(16px);
    transition: opacity 180ms ease, transform 260ms var(--gf-campus-ease);
}

.gf-token-reward-toast.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.gf-token-reward-toast__coin {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, 0.65);
    border-radius: 50%;
    color: #5c3a00;
    background: linear-gradient(145deg, #fff0a6, #f4ae26);
    box-shadow: 0 5px 18px rgba(244, 174, 38, 0.34);
    font-weight: 900;
}

.gf-token-reward-toast strong,
.gf-token-reward-toast small {
    display: block;
}

.gf-token-reward-toast strong {
    color: #ffe58d;
    font-size: 1rem;
}

.gf-token-reward-toast small {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.78);
}

/* Empty state ------------------------------------------------------------ */

.gf-campus-empty {
    grid-column: 1 / -1;
    padding: clamp(42px, 7vw, 88px) 28px;
    border: 1px dashed var(--gf-line);
    border-radius: 30px;
    color: var(--gf-muted);
    background: rgba(255, 255, 255, 0.05);
    text-align: center;
}

.gf-campus-empty i {
    display: block;
    margin-bottom: 16px;
    color: var(--gf-cyan);
    font-size: 3rem;
}

.gf-campus-empty h2 {
    margin: 0 0 8px;
    color: #fff;
}

/* Motion ---------------------------------------------------------------- */

@keyframes gf-avatar-bob {
    from { transform: translateY(0) rotate(-0.7deg); }
    to { transform: translateY(-3px) rotate(0.7deg); }
}

@keyframes gf-avatar-bob-left {
    from { transform: scaleX(-1) translateY(0) rotate(-0.7deg); }
    to { transform: scaleX(-1) translateY(-3px) rotate(0.7deg); }
}

@keyframes gf-leg-stride-left {
    from { transform: rotate(10deg); }
    to { transform: rotate(-10deg); }
}

@keyframes gf-leg-stride-right {
    from { transform: rotate(-10deg); }
    to { transform: rotate(10deg); }
}

@keyframes gf-arm-stride-left {
    from { transform: rotate(16deg); }
    to { transform: rotate(-7deg); }
}

@keyframes gf-arm-stride-right {
    from { transform: rotate(-16deg); }
    to { transform: rotate(7deg); }
}

@keyframes gf-orb-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

@keyframes gf-companion-follow-hop {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); }
    22% { transform: translate3d(-2px, -3px, 0) rotate(1deg); }
    48% { transform: translate3d(1px, -10px, 0) rotate(2deg) scaleY(1.03); }
    72% { transform: translate3d(2px, -2px, 0) rotate(-1deg) scaleY(0.97); }
}

@keyframes gf-companion-tail-wave {
    from { transform: rotate(13deg); }
    to { transform: rotate(42deg); }
}

@keyframes gf-aura-pulse {
    0%, 100% { opacity: 0.35; transform: scale(0.96); }
    50% { opacity: 0.62; transform: scale(1.03); }
}

@keyframes gf-wing-flight {
    0%, 100% { transform: scaleX(0.94) rotate(-1deg); }
    50% { transform: scaleX(1.04) rotate(1deg); }
}

@keyframes gf-cape-flight {
    0%, 100% { transform: skewX(-2deg) rotate(-1deg); }
    50% { transform: skewX(5deg) rotate(2deg); }
}

@keyframes gf-electric-jolt {
    0%, 100% { opacity: 0.58; transform: scale(0.96) rotate(-2deg); }
    50% { opacity: 0.96; transform: scale(1.06) rotate(2deg); }
}

@keyframes gf-flame-rise {
    from { opacity: 0.52; transform: translateY(2px) scaleX(0.96); }
    to { opacity: 0.88; transform: translateY(-3px) scaleX(1.04); }
}

@keyframes gf-aura-spin {
    to { transform: rotate(360deg); }
}

@keyframes gf-void-warp {
    0%, 100% { opacity: 0.5; transform: scale(0.92) rotate(-5deg); }
    50% { opacity: 0.86; transform: scale(1.04) rotate(7deg); }
}

@keyframes gf-tidal-flow {
    0%, 100% { transform: translateY(2px) skewX(-3deg); }
    50% { transform: translateY(-3px) skewX(4deg); }
}

@keyframes gf-clock-tick {
    to { transform: rotate(360deg); }
}

@keyframes gf-smoke-drift {
    0%, 100% { opacity: 0.42; transform: translate(-2px, 2px) scale(0.96); }
    50% { opacity: 0.72; transform: translate(3px, -4px) scale(1.05); }
}

@keyframes gf-shape-breathe {
    0%, 100% { opacity: 0.45; scale: 0.97; }
    50% { opacity: 0.78; scale: 1.025; }
}

@keyframes gf-hint-pulse {
    0%, 100% { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); }
    50% { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18), 0 0 0 7px rgba(124, 92, 255, 0.1); }
}

/* Responsive ------------------------------------------------------------ */

@media (max-width: 1199.98px) {
    .gf-campus-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gf-campus-stage {
        min-height: 680px;
        aspect-ratio: auto;
    }

    .gf-avatar-page__studio > .gf-avatar-studio {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "preview appearance" "collection collection";
    }

    .gf-event-round {
        width: min(680px, calc(100% - 32px));
    }

    .gf-event-leaderboard {
        inset-block-start: 215px;
        width: 180px;
        max-height: 190px;
    }
}

@media (max-width: 767.98px) {
    .gf-campus-shell,
    .gf-campus-directory {
        width: min(100% - 20px, 1540px);
        padding-block-start: 20px;
    }

    .gf-campus-heading,
    .gf-campus-topbar {
        align-items: stretch;
        flex-direction: column;
    }

    .gf-campus-heading__actions,
    .gf-campus-toolbar {
        justify-content: flex-start;
    }

    .gf-campus-grid {
        grid-template-columns: 1fr;
    }

    .gf-campus-grid--domains {
        grid-template-columns: 1fr;
    }

    .gf-campus-grid--communities {
        grid-template-columns: 1fr;
    }

    .gf-campus-collection__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .gf-avatar-page__studio > .gf-avatar-studio {
        display: block;
    }

    .gf-avatar-page__studio .gf-avatar-studio-preview {
        margin-bottom: 20px;
    }

    .gf-campus-card {
        min-height: 360px;
    }

    .gf-campus-stage-shell {
        border-radius: 24px;
    }

    .gf-campus-stage {
        min-height: 650px;
        background-position: 50% center;
    }

    .gf-campus-statusbar {
        inset: 10px 10px auto;
    }

    .gf-campus-hud {
        inset: 8px 8px auto auto;
    }

    .gf-campus-server-clock {
        min-width: 112px;
        min-height: 44px;
        padding: 6px 9px;
    }

    .gf-campus-fullscreen {
        width: 44px;
    }

    .gf-event-room {
        inset: 22% 4% auto auto;
        width: min(190px, 42vw);
    }

    .gf-campus-help {
        display: none;
    }

    .gf-room-door {
        width: 66px;
    }

    .gf-room-door__presence {
        inset-block-start: -14px;
        min-width: 65px;
        padding: 4px 6px;
        gap: 5px;
    }

    .gf-room-door__presence > span + span {
        padding-inline-start: 5px;
    }

    .gf-campus-presence__role small {
        display: none;
    }

    .gf-campus-presence__label {
        max-width: 66px;
        font-size: 0.55rem;
        line-height: 1.2;
    }

    .gf-room-door__label {
        max-width: 72px;
        padding-inline: 5px;
    }

    .gf-room-door__meta {
        display: none;
    }

    .gf-campus-floor-hint {
        bottom: 10px;
    }

    .gf-event-countdown {
        inset-block-start: 66px;
        padding: 14px 18px;
    }

    .gf-event-round {
        inset-block-start: 66px;
        width: calc(100% - 24px);
        padding: 12px 14px;
        border-radius: 18px;
    }

    .gf-event-round h2 {
        margin-block: 7px;
        font-size: 1.05rem;
    }

    .gf-event-round p {
        max-width: calc(100% - 50px);
    }

    .gf-event-vote-zone {
        left: 22%;
        top: 75%;
        width: 42vw;
        min-width: 150px;
        max-width: 320px;
    }

    .gf-event-vote-zone--correct {
        left: 78%;
    }

    .gf-event-vote-zone__label {
        min-width: 72px;
        padding: 7px 10px;
    }

    .gf-event-leaderboard {
        inset-block-start: 220px;
        inset-inline-end: 10px;
        width: 142px;
        max-height: 145px;
        padding: 9px 8px;
    }
}

@media (max-width: 479.98px) {
    .gf-campus-chat {
        right: 8px;
        bottom: 8px;
        width: calc(100vw - 16px);
        height: min(290px, calc(100vh - 90px));
        border-radius: 18px;
    }

    [dir="rtl"] .gf-campus-chat {
        right: auto;
        left: 8px;
    }

    .gf-campus-chat[data-size="1"] { height: min(430px, calc(100vh - 48px)); }
    .gf-campus-chat[data-size="2"] { height: calc(100vh - 16px); }

    .gf-campus-toolbar .gf-campus-tool span {
        display: none;
    }

    .gf-campus-tool {
        width: 42px;
        padding: 0;
    }

    .gf-campus-stage {
        min-height: 680px;
    }

    .gf-room-door {
        width: 58px;
    }

    .gf-room-door__label {
        max-width: 64px;
    }

    .gf-avatar-catalog {
        grid-template-columns: 1fr 1fr;
    }

    .gf-avatar-catalog-controls {
        grid-template-columns: 1fr 1fr;
    }

    .gf-avatar-clear-preview {
        grid-column: 1 / -1;
        width: 100%;
    }

    .gf-avatar-pagination__arrow {
        min-width: 42px;
    }

    .gf-avatar-pagination__arrow span {
        display: none;
    }

    .gf-event-round__eyebrow,
    .gf-event-score span,
    .gf-event-leaderboard h3 {
        font-size: 0;
    }

    .gf-event-round__eyebrow::after {
        content: "• LIVE";
        font-size: 0.62rem;
    }

    .gf-event-score b {
        font-size: 0.72rem;
    }

    .gf-event-leaderboard h3 i {
        font-size: 0.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gf-avatar-actor,
    .gf-campus-panel,
    .gf-campus-backdrop,
    .gf-campus-toast,
    .gf-token-reward-toast,
    .gf-campus-chat,
    .gf-campus-card,
    .gf-campus-card__image {
        transition-duration: 0.01ms !important;
    }

    .gf-avatar-actor.is-walking :where(.gf-avatar-rig, .gf-avatar-leg, .gf-avatar-arm),
    .gf-avatar-item[data-slot="companion"],
    .gf-avatar-item[data-slot="companion"]::after,
    .gf-avatar-item[data-slot="accessory"],
    .gf-campus-floor-hint,
    .gf-avatar-item[data-slot="aura"],
    .gf-avatar-item[data-slot="back"],
    .gf-avatar-item[data-slot="shape"],
    .gf-avatar-item-card__visual,
    .gf-avatar-item-card__visual::after,
    .gf-event-countdown,
    .gf-event-arena,
    .gf-event-room,
    .gf-event-room__portal::before,
    .gf-event-room__portal::after,
    .gf-event-room__portal > span,
    .gf-event-vote-zone__draw,
    .gf-event-vote-zone__pulse,
    .gf-event-vote-zone__effects i,
    .gf-event-teleport,
    .gf-event-teleport__ring,
    .gf-event-teleport > i {
        animation: none !important;
    }

    .gf-chat-image-viewer__backdrop {
        animation: none !important;
    }
}

@media (forced-colors: active) {
    .gf-room-door__portal,
    .gf-campus-tool,
    .gf-avatar-item-card,
    .gf-campus-panel,
    .gf-event-round,
    .gf-event-leaderboard,
    .gf-event-vote-zone__label,
    .gf-event-room__portal,
    .gf-campus-server-clock,
    .gf-campus-fullscreen {
        border: 2px solid CanvasText;
    }
}