﻿/* Gracia theme adapter for LegacyX CMS. The base look comes from public/legacyx/themes/gracia/styles/bundle.min.css. */
html.webp body.gracia-home-page,
body.gracia-home-page {
    overflow: hidden;
}

body.gracia-cms-page {
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 100vh;
}

.gracia-cms-wrapper {
    min-height: 100vh !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.gracia-logo-text {
    white-space: nowrap;
}

.gracia-logo-note {
    display: block;
    margin-left: -10px;
    color: rgba(223, 228, 225, .62);
    font: 700 10px/1 Inter, sans-serif;
    letter-spacing: .28em;
    text-transform: uppercase;
}

.gracia-auth-link {
    color: rgba(223, 228, 225, .75);
    font-family: 'Albertus Nova', serif;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: .08em;
}

.gracia-auth-link:hover { color: #fff; }

.gracia-flash {
    position: fixed;
    top: 92px;
    left: 50%;
    z-index: 1000;
    transform: translateX(-50%);
    width: min(720px, calc(100vw - 32px));
    padding: 14px 18px;
    color: #fff;
    background: rgba(8, 12, 20, .92);
    border: 1px solid rgba(84, 223, 233, .38);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .35);
}

.gracia-flash--success { border-color: rgba(95, 220, 124, .7); }
.gracia-flash--error { border-color: rgba(230, 80, 80, .75); }

.gracia-update-title {
    width: min(620px, 46vw);
    margin: 10px 0 0;
}

.gracia-update-title img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 34px rgba(80, 31, 180, .35));
}

.gracia-infinity-wrap {
    margin-top: 16px;
    height: 110px;
}

.gracia-infinity {
    display: block;
    color: rgba(244, 236, 255, .82);
    font-family: Georgia, serif;
    font-size: 160px;
    line-height: .62;
    text-align: center;
    text-shadow: 0 0 28px rgba(155, 84, 255, .55);
    user-select: none;
}

.gracia-home-page .hero-left {
    min-width: 0;
}

.gracia-home-page .hero-content--update {
    max-width: 680px;
}

.gracia-home-page .character-image {
    max-width: none;
    filter: drop-shadow(0 36px 70px rgba(0, 0, 0, .62));
}

.gracia-home-page .social-card-title {
    white-space: nowrap;
}

.gracia-main-content {
    display: block !important;
    height: auto !important;
    min-height: calc(100vh - var(--header-height) - var(--footer-height));
    padding: 58px var(--sidebar-width, 15rem) 100px 0 !important;
    overflow: visible !important;
}

.gracia-cms-surface {
    width: min(1180px, calc(100vw - var(--sidebar-width, 15rem) - 96px));
    margin: 0 auto;
    padding: clamp(28px, 3.2vw, 54px);
    position: relative;
    z-index: 2;
    color: var(--color-text-primary);
    background: linear-gradient(180deg, rgba(3, 10, 8, .72), rgba(5, 12, 12, .78));
    border: 1px solid rgba(112, 121, 112, .34);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .38), inset 0 0 80px rgba(84, 223, 233, .035);
    backdrop-filter: blur(5px);
}

.gracia-page-title {
    margin-bottom: 28px;
}

.gracia-page-title span,
.gracia-cms-content .eyebrow {
    display: block;
    margin: 0 0 10px;
    color: var(--color-accent);
    font: 800 13px/1 Inter, sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.gracia-page-title h1,
.gracia-cms-content h1,
.gracia-cms-content h2,
.gracia-cms-content h3,
.gracia-cms-content .section__head h1 {
    color: #f6f7f7;
    font-family: 'Albertus Nova', Georgia, serif;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .65);
}

.gracia-page-title h1 {
    margin: 0;
    font-size: clamp(36px, 4vw, 62px);
    line-height: 1;
}

.gracia-cms-content {
    color: rgba(220, 224, 224, .9);
    font-family: Inter, sans-serif;
    font-size: 15px;
    line-height: 1.55;
}

.gracia-cms-content a { color: var(--color-accent); }
.gracia-cms-content .page-card { padding: 0; border: 0; background: transparent; box-shadow: none; }
.gracia-cms-content .section__head { margin-bottom: 24px; }

.gracia-cms-content input,
.gracia-cms-content select,
.gracia-cms-content textarea {
    width: 100%;
    min-height: 44px;
    color: var(--color-text-primary);
    background: rgba(0, 0, 0, .42);
    border: 1px solid rgba(112, 121, 112, .42);
    border-radius: 0;
    padding: 10px 12px;
    outline: none;
}

.gracia-cms-content input:focus,
.gracia-cms-content select:focus,
.gracia-cms-content textarea:focus {
    border-color: rgba(84, 223, 233, .66);
    box-shadow: 0 0 0 1px rgba(84, 223, 233, .18);
}

.gracia-cms-content button,
.gracia-cms-content .button,
.gracia-cms-content .btn,
.gracia-cms-content input[type="submit"] {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    color: #f6f7f7 !important;
    text-decoration: none;
    font-family: 'Albertus Nova', serif;
    font-size: 15px;
    line-height: 1;
    text-transform: uppercase;
    border: 26px solid transparent !important;
    border-image-source: url('../../legacyx/themes/gracia/images/button-small.png') !important;
    border-image-slice: 26 16 fill !important;
    border-image-width: 26px 16px !important;
    border-image-repeat: stretch !important;
    background: transparent !important;
    cursor: pointer;
    text-shadow: 0 1px 2px #000;
}

.gracia-cms-content button:hover,
.gracia-cms-content .button:hover,
.gracia-cms-content .btn:hover {
    filter: brightness(1.18);
}

.gracia-cms-content table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(0, 0, 0, .24);
}

.gracia-cms-content th,
.gracia-cms-content td {
    border: 1px solid rgba(112, 121, 112, .24);
    padding: 13px 14px;
    vertical-align: middle;
}

.gracia-cms-content th {
    color: #dce0e0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.stream-hero-card,
.slot-machine-grid,
.market-toolbar,
.web-shop-toolbar,
.shop-toolbar,
.usercp-summary,
.character-profile,
.register-card,
.login-card {
    border: 1px solid rgba(112, 121, 112, .34) !important;
    background: linear-gradient(100deg, rgba(0, 0, 0, .42), rgba(20, 38, 38, .22)) !important;
    box-shadow: inset 0 0 45px rgba(84, 223, 233, .04), 0 18px 44px rgba(0, 0, 0, .22);
}

.stream-hero-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px;
    padding: 28px;
}

.stream-hero-card__content h2 {
    max-width: 660px;
    font-size: clamp(36px, 4vw, 58px);
    line-height: 1.02;
}

.stream-hero-card__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 28px 0;
}

.stream-hero-card__stats span,
.market-card,
.web-shop-card,
.shop-item-card,
.slot-machine-stage,
.slot-machine-side,
.stream-card,
.character-card {
    border: 1px solid rgba(112, 121, 112, .32) !important;
    background: rgba(0, 0, 0, .3) !important;
}

.stream-apply { padding: 24px; border: 1px solid rgba(112,121,112,.32); background: rgba(0,0,0,.28); }
.stream-apply input { margin-bottom: 12px; }

.market-grid,
.web-shop-grid,
.shop-items-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.market-card,
.web-shop-card,
.shop-item-card {
    padding: 18px !important;
}

.market-filter,
.web-shop-filter,
.shop-filter {
    display: grid;
    grid-template-columns: repeat(4, minmax(130px, 1fr));
    gap: 14px;
    align-items: end;
}

.market-filter__actions,
.web-shop-actions,
.shop-filter__actions { display: flex; gap: 10px; align-items: center; }
.market-filter__flags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px 18px; }
.market-filter__flags label { width: auto; display: inline-flex; align-items: center; gap: 6px; }
.market-filter__flags input { width: auto; min-height: 0; }

.slot-machine-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 22px;
    padding: 22px;
}

.slot-machine-reels { display: grid; grid-template-columns: repeat(5, minmax(90px, 1fr)); gap: 12px; }
.slot-machine-card-face { border-radius: 10px; overflow: hidden; border: 1px solid rgba(84, 223, 233, .28); background: rgba(0,0,0,.5); }
.slot-machine-card-face img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.slot-machine-card-face span { display: block; padding: 9px 6px; text-align: center; font-family: 'Albertus Nova', serif; }
.slot-machine-side { padding: 20px; }
.slot-machine-form { display: grid; grid-template-columns: 92px minmax(120px, .8fr); gap: 10px; align-items: end; }
.slot-machine-form label { margin: 0; }
.slot-machine-rules { margin: 18px 0; padding-left: 18px; color: rgba(220, 224, 224, .8); }
.slot-machine-balance { padding: 14px 16px; background: rgba(0, 0, 0, .38); border: 1px solid rgba(112,121,112,.32); }
.slot-machine-balance strong { display: block; margin-top: 6px; font-family: 'Albertus Nova', serif; font-size: 26px; color: #f6f7f7; }

@media (max-width: 1200px) {
    body.gracia-cms-page { padding-bottom: 90px; }
    .gracia-main-content { padding: 32px 18px 120px !important; }
    .gracia-cms-surface { width: 100%; }
    .stream-hero-card,
    .slot-machine-grid { grid-template-columns: 1fr; }
    .market-grid,
    .web-shop-grid,
    .shop-items-grid { grid-template-columns: 1fr; }
    .market-filter,
    .web-shop-filter,
    .shop-filter { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
}

@media (max-width: 760px) {
    .gracia-logo-note { display: none; }
    .gracia-update-title { width: min(92vw, 520px); }
    .gracia-infinity { font-size: 110px; }
    .stream-hero-card__stats { grid-template-columns: 1fr; }
    .market-filter,
    .web-shop-filter,
    .shop-filter { grid-template-columns: 1fr; }
    .slot-machine-reels { grid-template-columns: repeat(5, minmax(54px, 1fr)); gap: 6px; }
    .slot-machine-form { grid-template-columns: 1fr; }
}
