:root {
    --mg-bg: #080a0e;
    --mg-surface: #121722;
    --mg-surface-2: #1a2130;
    --mg-border: #30394a;
    --mg-text: #f4f1e8;
    --mg-muted: #aeb6c5;
    --mg-gold: #d8aa49;
    --mg-gold-light: #f1cf7a;
    --mg-danger: #b4363d;
    --mg-focus: #7cc7ff;
}

html {
    min-height: 100%;
    background: var(--mg-bg);
}

body {
    min-height: 100vh;
    color: var(--mg-text);
    background:
        radial-gradient(circle at 80% 10%, rgba(180, 54, 61, .14), transparent 32rem),
        radial-gradient(circle at 15% 30%, rgba(216, 170, 73, .08), transparent 28rem),
        linear-gradient(145deg, #080a0e 0%, #10141c 55%, #090b10 100%);
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

a {
    color: var(--mg-gold-light);
}

a:hover {
    color: #ffe4a3;
}

.skip-link {
    position: fixed;
    z-index: 2000;
    top: .5rem;
    left: .5rem;
    padding: .75rem 1rem;
    color: #000;
    background: #fff;
    transform: translateY(-150%);
}

.skip-link:focus {
    transform: translateY(0);
}

:focus-visible {
    outline: 3px solid var(--mg-focus) !important;
    outline-offset: 3px;
}

.site-header {
    position: relative;
    z-index: 20;
    background: rgba(8, 10, 14, .92);
    border-bottom: 1px solid rgba(216, 170, 73, .28);
    backdrop-filter: blur(12px);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    color: var(--mg-text);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
}

.brand-mark {
    display: inline-grid;
    width: 2.65rem;
    height: 2.25rem;
    place-items: center;
    color: #17120a;
    background: linear-gradient(145deg, var(--mg-gold-light), #a97725);
    border-radius: .55rem;
    box-shadow: 0 0 1.5rem rgba(216, 170, 73, .18);
    font-size: .72rem;
    letter-spacing: .04em;
    transform: rotate(-2deg);
    transition: transform .25s ease, box-shadow .25s ease;
}

.brand:hover .brand-mark {
    box-shadow: 0 0 2rem rgba(216, 170, 73, .35);
    transform: rotate(0deg) translateY(-1px);
}

.auth-page {
    background:
        linear-gradient(90deg, rgba(4, 6, 9, .82), rgba(4, 6, 9, .6) 50%, rgba(4, 6, 9, .82)),
        linear-gradient(0deg, rgba(5, 7, 10, .76), rgba(5, 7, 10, .08) 65%),
        url("../assets/images/auth-city-bg.jpg") center / cover no-repeat,
        var(--mg-bg);
}

.auth-page::before {
    position: fixed;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    content: "";
    opacity: .16;
    background-image: repeating-linear-gradient(
        108deg,
        transparent 0,
        transparent 48px,
        rgba(224, 235, 255, .18) 49px,
        transparent 51px,
        transparent 94px
    );
    background-size: 150% 150%;
    animation: rain-drift 12s linear infinite;
}

.auth-page .site-header,
.auth-page .site-footer {
    background: rgba(5, 7, 10, .78);
    backdrop-filter: blur(12px);
}

.auth-section {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: calc(100vh - 11rem);
    place-items: center;
    padding: 2rem 0;
}

.auth-panel {
    position: relative;
    overflow: hidden;
    width: min(100%, 34rem);
    padding: clamp(1.25rem, 4vw, 2.5rem);
    background: linear-gradient(155deg, rgba(26, 33, 48, .9), rgba(9, 12, 18, .96));
    border: 1px solid rgba(216, 170, 73, .32);
    border-radius: 1rem;
    box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, .66), inset 0 1px rgba(255, 255, 255, .04);
    backdrop-filter: blur(18px);
    animation: panel-arrive .7s cubic-bezier(.2, .8, .2, 1) both;
}

.auth-panel::before {
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, var(--mg-gold-light), transparent);
    box-shadow: 0 0 1.2rem rgba(216, 170, 73, .65);
}

.auth-panel::after {
    position: absolute;
    z-index: -1;
    top: -5rem;
    right: -5rem;
    width: 12rem;
    height: 12rem;
    content: "";
    border-radius: 50%;
    background: rgba(180, 54, 61, .12);
    filter: blur(2rem);
    animation: ambient-pulse 6s ease-in-out infinite;
}

.auth-panel-wide {
    width: min(100%, 48rem);
}

.eyebrow {
    margin-bottom: .5rem;
    color: var(--mg-gold);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.auth-title {
    margin-bottom: .65rem;
    font-weight: 800;
}

.auth-subtitle,
.form-text,
.site-footer {
    color: var(--mg-muted) !important;
}

.site-footer {
    position: relative;
    z-index: 1;
}

.form-label,
.form-check-label {
    font-weight: 650;
}

.form-control,
.form-select {
    min-height: 3rem;
    color: var(--mg-text);
    background-color: #0d1119;
    border-color: var(--mg-border);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.form-control:focus,
.form-select:focus {
    color: var(--mg-text);
    background-color: #0d1119;
    border-color: var(--mg-gold);
    box-shadow: 0 0 0 .25rem rgba(216, 170, 73, .18);
}

.form-select option {
    color: #111;
    background: #fff;
}

.btn-gold {
    position: relative;
    overflow: hidden;
    min-height: 3rem;
    color: #181207;
    background: linear-gradient(135deg, var(--mg-gold-light), #b98229);
    border: 0;
    font-weight: 800;
    box-shadow: 0 .7rem 1.5rem rgba(0, 0, 0, .22);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.btn-gold:hover,
.btn-gold:focus {
    color: #080808;
    background: linear-gradient(135deg, #ffe29b, #d69f3f);
    box-shadow: 0 .85rem 2rem rgba(216, 170, 73, .2);
    transform: translateY(-2px);
}

.btn-gold::after {
    position: absolute;
    top: -50%;
    left: -35%;
    width: 22%;
    height: 200%;
    content: "";
    background: rgba(255, 255, 255, .38);
    filter: blur(.35rem);
    transform: rotate(18deg);
    animation: button-shine 5.5s ease-in-out infinite;
}

.divider {
    height: 1px;
    margin: 1.5rem 0;
    background: var(--mg-border);
}

.field-errors {
    margin-top: .4rem;
    color: #ffb5b8;
    font-size: .9rem;
}

.alert-danger {
    color: #ffe5e6;
    background: rgba(180, 54, 61, .22);
    border-color: rgba(255, 123, 129, .4);
}

.alert-success {
    color: #ddfbe8;
    background: rgba(34, 139, 82, .2);
    border-color: rgba(92, 214, 141, .36);
}

.dashboard-card {
    color: var(--mg-text);
    background: var(--mg-surface);
    border: 1px solid var(--mg-border);
}

.svg-symbols {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.online-player {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--mg-muted);
    font-size: .9rem;
    font-weight: 700;
}

.online-player > span {
    width: .55rem;
    height: .55rem;
    background: #4fd18b;
    border-radius: 50%;
    box-shadow: 0 0 .8rem rgba(79, 209, 139, .75);
    animation: online-pulse 2.5s ease-in-out infinite;
}

.game-interface {
    position: relative;
    z-index: 15;
    box-shadow: 0 .8rem 2.5rem rgba(0, 0, 0, .24);
}

.player-hud {
    background: linear-gradient(90deg, rgba(18, 23, 34, .98), rgba(11, 14, 21, .98));
    border-bottom: 1px solid rgba(216, 170, 73, .17);
}

.hud-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr 1.15fr;
}

.hud-item {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: .7rem;
    min-width: 0;
    padding: .75rem 1rem;
    border-right: 1px solid rgba(255, 255, 255, .07);
}

.hud-item:last-child {
    border-right: 0;
}

.hud-icon {
    grid-row: 1 / 3;
    align-self: center;
    width: 1.35rem;
    height: 1.35rem;
    color: var(--mg-gold-light);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.hud-label {
    overflow: hidden;
    color: var(--mg-muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.hud-item strong {
    overflow: hidden;
    font-size: .95rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hud-life .hud-icon,
.hud-life strong {
    color: var(--vital-color);
}

.hud-meter {
    position: absolute;
    right: 1rem;
    bottom: .35rem;
    left: 3.05rem;
    height: .16rem;
    overflow: hidden;
    appearance: none;
    background: rgba(255, 255, 255, .08);
    border: 0;
    border-radius: 2rem;
}

.hud-meter::-webkit-progress-bar {
    background: rgba(255, 255, 255, .08);
    border-radius: 2rem;
}

.hud-meter::-webkit-progress-value {
    background: var(--vital-color);
    border-radius: 2rem;
    box-shadow: 0 0 .6rem var(--vital-glow);
}

.hud-meter::-moz-progress-bar {
    background: var(--vital-color);
    border-radius: 2rem;
    box-shadow: 0 0 .6rem var(--vital-glow);
}

.game-nav {
    background: rgba(7, 9, 14, .97);
    border-bottom: 1px solid rgba(216, 170, 73, .25);
}

.game-nav-toggle {
    display: none;
    align-items: center;
    gap: .65rem;
    width: 100%;
    min-height: 3.25rem;
    padding: .65rem 1rem;
    border: 0;
    color: var(--mg-text);
    background: transparent;
    font: inherit;
    font-weight: 800;
    text-align: left;
}

.game-nav-toggle-icon {
    font-size: 1.25rem;
    line-height: 1;
}

.game-nav-current {
    margin-left: auto;
    color: var(--mg-gold-light);
    font-size: .84rem;
}

.game-nav-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    min-height: 3.25rem;
}

.game-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-width: 7.5rem;
    padding: .8rem 1.1rem;
    color: var(--mg-muted);
    background: transparent;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, .06);
    font: inherit;
    font-size: .86rem;
    font-weight: 750;
    text-decoration: none;
    transition: color .2s ease, background .2s ease;
}

.game-nav-link::after {
    position: absolute;
    right: 18%;
    bottom: 0;
    left: 18%;
    height: 2px;
    content: "";
    background: var(--mg-gold-light);
    box-shadow: 0 0 .8rem rgba(216, 170, 73, .55);
    transform: scaleX(0);
    transition: transform .2s ease;
}

.game-nav-link:hover,
.game-nav-link:focus,
.game-nav-link.active {
    color: var(--mg-gold-light);
    background: rgba(216, 170, 73, .07);
}

.game-nav-link.active::after,
.game-nav-link:hover::after {
    transform: scaleX(1);
}

.game-nav-link svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.75;
}

.game-nav-logout {
    display: flex;
    margin-left: auto;
}

.game-nav-logout .game-nav-link {
    border-right: 0;
    border-left: 1px solid rgba(255, 255, 255, .06);
}

.tone-full {
    --vital-color: #51d792;
    --vital-color-2: #2e9f69;
    --vital-glow: rgba(81, 215, 146, .45);
}

.tone-reduced {
    --vital-color: #bad65a;
    --vital-color-2: #789c38;
    --vital-glow: rgba(186, 214, 90, .45);
}

.tone-warning {
    --vital-color: #e7ba4a;
    --vital-color-2: #b77a27;
    --vital-glow: rgba(231, 186, 74, .45);
}

.tone-danger {
    --vital-color: #ef873f;
    --vital-color-2: #b64e2d;
    --vital-glow: rgba(239, 135, 63, .5);
}

.tone-critical {
    --vital-color: #f04f59;
    --vital-color-2: #a91f2b;
    --vital-glow: rgba(240, 79, 89, .55);
}

.hud-life.tone-critical .hud-icon,
.stat-life.tone-critical .stat-icon,
.vital-block.tone-critical .vital-label strong {
    animation: critical-pulse 1.35s ease-in-out infinite;
}

.game-page {
    background:
        radial-gradient(circle at 88% 8%, rgba(180, 54, 61, .2), transparent 28rem),
        linear-gradient(rgba(6, 8, 12, .86), rgba(6, 8, 12, .96)),
        url("../assets/images/auth-city-bg.jpg") center top / cover fixed no-repeat,
        var(--mg-bg);
}

.game-shell {
    position: relative;
    z-index: 1;
}

.dashboard-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding: clamp(1.25rem, 3vw, 2.25rem);
    background: linear-gradient(130deg, rgba(20, 26, 38, .94), rgba(10, 13, 19, .88));
    border: 1px solid rgba(216, 170, 73, .28);
    border-radius: 1rem;
    box-shadow: 0 1.4rem 4rem rgba(0, 0, 0, .42);
    backdrop-filter: blur(14px);
    animation: panel-arrive .65s cubic-bezier(.2, .8, .2, 1) both;
}

.dashboard-hero h1 {
    margin-bottom: .5rem;
    font-size: clamp(1.7rem, 4vw, 2.65rem);
    font-weight: 850;
}

.dashboard-hero h1 span {
    color: var(--mg-gold-light);
}

.dashboard-lead {
    margin: 0;
    color: var(--mg-muted);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    position: relative;
    min-height: 9.5rem;
    overflow: hidden;
    padding: 1.15rem;
    background: linear-gradient(150deg, rgba(26, 33, 48, .95), rgba(11, 14, 21, .96));
    border: 1px solid var(--mg-border);
    border-radius: .9rem;
    box-shadow: 0 1rem 2.6rem rgba(0, 0, 0, .28);
    animation: stat-rise .65s cubic-bezier(.2, .8, .2, 1) both;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.stat-card:nth-of-type(2) { animation-delay: .06s; }
.stat-card:nth-of-type(3) { animation-delay: .12s; }
.stat-card:nth-of-type(4) { animation-delay: .18s; }
.stat-card:nth-of-type(5) { animation-delay: .24s; }
.stat-card:nth-of-type(6) { animation-delay: .3s; }

.stat-card::after {
    position: absolute;
    right: -2.5rem;
    bottom: -3.5rem;
    width: 7rem;
    height: 7rem;
    content: "";
    border: 1px solid rgba(216, 170, 73, .18);
    border-radius: 50%;
    box-shadow: 0 0 2rem rgba(216, 170, 73, .08);
}

.stat-card:hover {
    border-color: rgba(216, 170, 73, .5);
    box-shadow: 0 1.25rem 3.2rem rgba(0, 0, 0, .38);
    transform: translateY(-4px);
}

.stat-heading {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: var(--mg-muted);
}

.stat-heading h3 {
    margin: 0;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.stat-icon {
    width: 1.35rem;
    height: 1.35rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.stat-life .stat-heading { color: var(--vital-color); }
.stat-energy .stat-heading { color: #65d7e8; }
.stat-attack .stat-heading { color: #f0b064; }
.stat-defense .stat-heading { color: #79b9e8; }
.stat-cash .stat-heading,
.stat-bank .stat-heading { color: var(--mg-gold-light); }

.stat-value {
    margin: 1.2rem 0 0;
    font-size: clamp(1.55rem, 3vw, 2.2rem);
    font-weight: 850;
    letter-spacing: -.03em;
}

.stat-value span {
    color: var(--mg-muted);
    font-size: .55em;
    letter-spacing: 0;
}

.life-meter {
    display: block;
    width: 100%;
    height: .42rem;
    margin-top: 1rem;
    overflow: hidden;
    appearance: none;
    background: #080a0f;
    border: 0;
    border-radius: 99rem;
}

.life-meter::-webkit-progress-bar {
    background: #080a0f;
    border-radius: 99rem;
}

.life-meter::-webkit-progress-value {
    background: linear-gradient(90deg, var(--vital-color-2), var(--vital-color));
    border-radius: 99rem;
    box-shadow: 0 0 1rem var(--vital-glow);
}

.life-meter::-moz-progress-bar {
    background: linear-gradient(90deg, var(--vital-color-2), var(--vital-color));
    border-radius: 99rem;
    box-shadow: 0 0 1rem var(--vital-glow);
}

.section-heading {
    margin-bottom: 1.5rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    background: linear-gradient(130deg, rgba(20, 26, 38, .94), rgba(10, 13, 19, .9));
    border: 1px solid rgba(216, 170, 73, .26);
    border-radius: 1rem;
    box-shadow: 0 1.4rem 4rem rgba(0, 0, 0, .35);
    animation: panel-arrive .6s cubic-bezier(.2, .8, .2, 1) both;
}

.section-heading h1 {
    margin-bottom: .45rem;
    font-size: clamp(1.75rem, 4vw, 2.55rem);
    font-weight: 850;
}

.section-heading > p:last-child,
.section-heading > div > p:last-child {
    margin-bottom: 0;
    color: var(--mg-muted);
}

.settings-grid,
.hq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.game-panel {
    padding: clamp(1.2rem, 3vw, 2rem);
    background: linear-gradient(150deg, rgba(25, 32, 46, .96), rgba(10, 13, 20, .97));
    border: 1px solid var(--mg-border);
    border-radius: 1rem;
    box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .32);
    animation: stat-rise .65s cubic-bezier(.2, .8, .2, 1) both;
}

.settings-grid .game-panel:nth-child(2),
.hq-grid .game-panel:nth-child(2) { animation-delay: .08s; }
.settings-grid .game-panel:nth-child(3),
.hq-grid .game-panel:nth-child(3) { animation-delay: .16s; }

.birth-panel,
.finance-panel {
    grid-column: 1 / -1;
}

.panel-heading {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: 1.35rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.panel-heading > svg {
    width: 2rem;
    height: 2rem;
    padding: .35rem;
    color: var(--mg-gold-light);
    background: rgba(216, 170, 73, .09);
    border: 1px solid rgba(216, 170, 73, .2);
    border-radius: .55rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.55;
}

.panel-heading h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
}

.panel-heading .eyebrow {
    margin-bottom: .18rem;
}

.panel-note,
.current-value {
    color: var(--mg-muted);
}

.current-value strong {
    color: var(--mg-text);
    overflow-wrap: anywhere;
}

.locked-value {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem;
    background: rgba(79, 209, 139, .08);
    border: 1px solid rgba(79, 209, 139, .25);
    border-radius: .75rem;
}

.locked-value > span {
    display: grid;
    flex: 0 0 auto;
    width: 2.2rem;
    height: 2.2rem;
    place-items: center;
    color: #08140e;
    background: #51d792;
    border-radius: 50%;
    font-weight: 900;
}

.locked-value p {
    margin: 0;
    color: var(--mg-muted);
}

.account-alert {
    margin-bottom: 1.25rem;
}

.hq-heading {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.identity-emblem {
    display: grid;
    flex: 0 0 auto;
    width: clamp(4rem, 9vw, 5.5rem);
    height: clamp(4rem, 9vw, 5.5rem);
    place-items: center;
    color: #191207;
    background: linear-gradient(145deg, #f1cf7a, #a87121);
    border: 2px solid rgba(255, 229, 164, .45);
    border-radius: 1rem;
    box-shadow: 0 0 2rem rgba(216, 170, 73, .2);
    font-size: clamp(1.7rem, 5vw, 2.4rem);
    font-weight: 900;
    transform: rotate(-3deg);
}

.dossier-list {
    margin: 0;
}

.dossier-list > div {
    display: grid;
    grid-template-columns: minmax(8rem, .8fr) 1.2fr;
    gap: 1rem;
    padding: .8rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .065);
}

.dossier-list > div:last-child {
    border-bottom: 0;
}

.dossier-list dt {
    color: var(--mg-muted);
    font-weight: 600;
}

.dossier-list dd {
    margin: 0;
    overflow-wrap: anywhere;
    font-weight: 750;
}

.vital-block {
    margin-bottom: 1.25rem;
}

.vital-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .55rem;
}

.vital-label > span {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--mg-muted);
    font-weight: 700;
}

.vital-label svg,
.combat-numbers svg,
.money-row svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.vital-label strong {
    color: var(--vital-color);
}

.vital-meter {
    display: block;
    width: 100%;
    height: .58rem;
    overflow: hidden;
    appearance: none;
    background: #07090d;
    border: 0;
    border-radius: 4rem;
}

.vital-meter::-webkit-progress-bar {
    background: #07090d;
    border-radius: 4rem;
}

.vital-meter::-webkit-progress-value {
    background: linear-gradient(90deg, var(--vital-color-2), var(--vital-color));
    border-radius: 4rem;
    box-shadow: 0 0 1rem var(--vital-glow);
}

.vital-meter::-moz-progress-bar {
    background: linear-gradient(90deg, var(--vital-color-2), var(--vital-color));
    border-radius: 4rem;
    box-shadow: 0 0 1rem var(--vital-glow);
}

.energy-tone {
    --vital-color: #65d7e8;
    --vital-color-2: #327fa7;
    --vital-glow: rgba(101, 215, 232, .45);
}

.combat-numbers,
.money-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
    margin-top: 1.5rem;
}

.combat-numbers > div,
.money-row > div {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .25rem .6rem;
    padding: 1rem;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: .75rem;
}

.combat-numbers svg,
.money-row svg {
    grid-row: 1 / 3;
    align-self: center;
    color: var(--mg-gold-light);
}

.combat-numbers span,
.money-row span {
    color: var(--mg-muted);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.combat-numbers strong,
.money-row strong {
    font-size: 1.2rem;
}

.wealth-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem 1.15rem;
    color: var(--mg-gold-light);
    background: linear-gradient(90deg, rgba(216, 170, 73, .11), rgba(216, 170, 73, .035));
    border: 1px solid rgba(216, 170, 73, .25);
    border-radius: .75rem;
}

.wealth-total strong {
    font-size: 1.3rem;
}

.district-panel {
    position: relative;
    min-height: 17rem;
    overflow: hidden;
    padding: clamp(1.5rem, 4vw, 3rem);
    background:
        linear-gradient(90deg, rgba(8, 10, 15, .96) 0%, rgba(8, 10, 15, .8) 54%, rgba(8, 10, 15, .22)),
        url("../assets/images/auth-city-bg.jpg") center 58% / cover no-repeat;
    border: 1px solid rgba(216, 170, 73, .24);
    border-radius: 1rem;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .36);
}

.character-preview {
    width: min(9rem, 30vw);
    height: min(9rem, 30vw);
    object-fit: contain;
    image-rendering: pixelated;
    background: rgba(4, 6, 10, .7);
    border: 1px solid rgba(216, 170, 73, .35);
    border-radius: .85rem;
}

.character-selection-hero {
    margin-bottom: 1rem;
}

.character-selection-note {
    padding: 1rem 1.15rem;
    color: #f6e8c5;
    background: rgba(216, 170, 73, .1);
    border: 1px solid rgba(216, 170, 73, .32);
    border-radius: .8rem;
}

.character-choice-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
    background: linear-gradient(155deg, rgba(22, 27, 37, .98), rgba(9, 12, 18, .98));
    border: 1px solid rgba(216, 170, 73, .28);
    border-radius: 1rem;
    box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, .32);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.character-choice-card:hover,
.character-choice-card:focus-within {
    transform: translateY(-.25rem);
    border-color: rgba(245, 202, 105, .76);
    box-shadow: 0 1.75rem 3.75rem rgba(0, 0, 0, .46), 0 0 1.5rem rgba(216, 170, 73, .12);
}

.character-choice-preview {
    display: grid;
    min-height: 15rem;
    overflow: hidden;
    place-items: center;
    padding: 1rem;
    background:
        radial-gradient(circle at 50% 78%, rgba(216, 170, 73, .27), transparent 42%),
        linear-gradient(180deg, rgba(50, 35, 23, .62), rgba(8, 11, 17, .95));
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.character-choice-preview img {
    width: min(13rem, 55vw);
    max-height: 13rem;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 .9rem .8rem rgba(0, 0, 0, .58));
}

.character-choice-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .7rem;
    padding: 1.35rem;
}

.character-choice-content h2,
.character-choice-content p {
    margin: 0;
}

.character-choice-content p:not(.eyebrow) {
    color: var(--mg-muted);
}

.character-stage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin: 1.25rem 0;
    padding: 1rem 1.25rem;
    background: linear-gradient(115deg, rgba(216, 170, 73, .14), rgba(15, 19, 27, .88));
    border: 1px solid rgba(216, 170, 73, .24);
    border-radius: 1rem;
}

.character-stage-preview {
    width: 7rem;
    height: 7rem;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 .8rem 1rem rgba(0, 0, 0, .5));
}

.account-panel {
    padding: clamp(1.25rem, 3vw, 2rem);
    background: rgba(13, 17, 24, .88);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 1rem;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .25);
}

.combat-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    padding: clamp(1.35rem, 3vw, 2.25rem);
    background: linear-gradient(115deg, rgba(93, 15, 20, .92), rgba(12, 15, 22, .96) 68%);
    border: 1px solid rgba(223, 73, 73, .28);
    border-radius: 1rem;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .3);
}

.combat-hero h1 {
    margin-bottom: .4rem;
    font-weight: 850;
}

.combat-hero p:last-child {
    max-width: 46rem;
    margin-bottom: 0;
    color: var(--mg-muted);
}

.combat-daily-counter {
    flex: 0 0 auto;
    min-width: 7.5rem;
    padding: .8rem 1rem;
    text-align: center;
    background: rgba(0, 0, 0, .32);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: .8rem;
}

.combat-daily-counter span,
.combat-outcome-grid span,
.combat-record-grid span {
    display: block;
    color: var(--mg-muted);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.combat-daily-counter strong {
    color: var(--mg-gold-light);
    font-size: 1.45rem;
}

.combat-result {
    overflow: hidden;
    margin-bottom: 1.25rem;
    background: rgba(11, 14, 20, .96);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 1rem;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .38);
}

.combat-victory {
    border-color: rgba(81, 215, 146, .36);
}

.combat-defeat {
    border-color: rgba(223, 73, 73, .42);
}

.combat-result-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.4rem;
}

.combat-result-heading h2,
.combat-result-heading p:last-child {
    margin-bottom: 0;
}

.combat-scene {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(5, 7, 12, .28) 0%, rgba(5, 7, 12, .48) 58%, rgba(3, 4, 7, .92) 100%),
        url("../assets/images/auth-city-bg.jpg") center 65% / cover no-repeat;
    border-block: 1px solid rgba(255, 255, 255, .08);
}

.combat-scene::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 35%;
    pointer-events: none;
    content: "";
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .38));
}

.combat-scene canvas {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: clamp(13.5rem, 42vw, 26rem);
    max-width: 100%;
}

.combat-scene-status {
    position: relative;
    z-index: 3;
    margin: 0;
    min-height: 3.25rem;
    padding: .75rem 1rem;
    color: #fff;
    font-weight: 750;
    text-align: center;
    background: linear-gradient(90deg, rgba(5, 7, 12, .98), rgba(25, 15, 19, .98), rgba(5, 7, 12, .98));
    border-top: 1px solid rgba(255, 255, 255, .1);
    text-shadow: 0 2px .35rem #000;
}

.combat-scene.is-loading canvas {
    opacity: .35;
}

.combat-scene.has-error {
    min-height: 12rem;
}

.combat-outcome-grid,
.combat-record-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, .08);
}

.combat-outcome-grid > div,
.combat-record-grid > div {
    padding: 1rem 1.15rem;
    background: rgba(10, 13, 19, .96);
}

.combat-outcome-grid strong,
.combat-record-grid strong {
    display: block;
    margin-top: .3rem;
    color: var(--mg-gold-light);
    font-size: 1.2rem;
}

.combat-death-notice {
    margin: 0;
    padding: .9rem 1.25rem;
    color: #ffd8d8;
    font-weight: 750;
    text-align: center;
    background: rgba(152, 24, 31, .35);
}

.combat-record {
    overflow: hidden;
    margin-bottom: 1.25rem;
    background: rgba(12, 16, 23, .9);
    border: 1px solid rgba(216, 170, 73, .2);
    border-radius: 1rem;
}

.combat-record .panel-heading {
    padding: 1.15rem 1.25rem;
}

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

.attack-targets {
    display: grid;
    gap: .85rem;
}

.attack-target {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(10rem, auto);
    align-items: center;
    gap: 1rem;
    overflow: hidden;
    padding: 1rem;
    background: rgba(13, 17, 24, .92);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: .9rem;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.attack-target.same-city:hover {
    border-color: rgba(223, 73, 73, .4);
    box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .25);
    transform: translateY(-2px);
}

.attack-target.other-city {
    opacity: .67;
}

.attack-target-avatar {
    width: 5.5rem;
    height: 5.5rem;
    object-fit: contain;
    image-rendering: pixelated;
    background: rgba(0, 0, 0, .3);
    border: 1px solid rgba(216, 170, 73, .22);
    border-radius: .75rem;
}

.attack-target h3 {
    margin-bottom: .5rem;
    font-size: 1.15rem;
}

.attack-target-character {
    margin: -.2rem 0 .55rem;
    color: var(--mg-gold-light);
    font-size: .84rem;
    font-weight: 700;
}

.attack-target-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem 1rem;
    margin: 0;
}

.attack-target-stats div {
    display: flex;
    gap: .35rem;
}

.attack-target-stats dt {
    color: var(--mg-muted);
    font-weight: 500;
}

.attack-target-stats dd {
    margin: 0;
    color: var(--mg-text);
    font-weight: 750;
}

.attack-target-action {
    text-align: right;
}

.attack-target-action .btn {
    min-width: 8rem;
    font-weight: 800;
    box-shadow: 0 0 1rem rgba(220, 53, 69, .16);
}

.target-blocked {
    display: inline-block;
    max-width: 14rem;
    color: var(--mg-muted);
    font-size: .86rem;
}

.combat-history-table {
    margin-bottom: 0;
}

.gym-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    padding: clamp(1.35rem, 3vw, 2.25rem);
    background: linear-gradient(115deg, rgba(93, 35, 15, .94), rgba(22, 12, 16, .96) 66%, rgba(10, 14, 19, .98));
    border: 1px solid rgba(216, 170, 73, .32);
    border-radius: 1rem;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .32);
}

.gym-hero h1, .gym-scene-heading h2, .gym-result h2 { margin-bottom: .4rem; font-weight: 850; }
.gym-hero p:last-child, .gym-scene-heading p:last-child, .gym-result p:last-child { max-width: 46rem; margin-bottom: 0; color: var(--mg-muted); }

.gym-readiness {
    flex: 0 0 auto;
    min-width: 10rem;
    padding: .85rem 1rem;
    text-align: center;
    background: rgba(0, 0, 0, .35);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: .8rem;
}

.gym-readiness span, .gym-result-energy span {
    display: block;
    color: var(--mg-muted);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.gym-readiness strong { display: block; margin-top: .25rem; color: var(--mg-gold-light); font-size: 1.2rem; }

.gym-scene-panel {
    overflow: hidden;
    margin-bottom: 1.25rem;
    background: rgba(10, 13, 19, .96);
    border: 1px solid rgba(216, 170, 73, .25);
    border-radius: 1rem;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .38);
}

.gym-scene-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.4rem; }

.gym-scene {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(6, 7, 10, .04), rgba(4, 5, 8, .18) 56%, rgba(4, 5, 8, .74)), url("../assets/images/gym-interior-v2.png") center center / cover no-repeat;
    border-block: 1px solid rgba(255, 255, 255, .1);
}

.gym-scene::after { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; height: 26%; pointer-events: none; content: ""; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .5)); }
.gym-scene canvas { position: relative; z-index: 1; display: block; width: 100%; height: clamp(13.5rem, 42vw, 26rem); max-width: 100%; }
.gym-scene-status { position: relative; z-index: 3; min-height: 3.25rem; margin: 0; padding: .75rem 1rem; color: #fff; font-weight: 800; text-align: center; background: linear-gradient(90deg, rgba(5, 7, 12, .98), rgba(31, 20, 14, .98), rgba(5, 7, 12, .98)); border-top: 1px solid rgba(255, 255, 255, .1); text-shadow: 0 2px .35rem #000; }
.gym-scene.is-loading canvas { opacity: .35; }
.gym-scene.has-error { min-height: 12rem; }

.gym-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1.2rem 1.4rem;
    background: linear-gradient(112deg, rgba(34, 105, 71, .45), rgba(11, 17, 23, .96));
    border: 1px solid rgba(81, 215, 146, .35);
    border-radius: 1rem;
}

.gym-result-energy { flex: 0 0 auto; min-width: 10rem; padding: .7rem .9rem; text-align: center; background: rgba(0, 0, 0, .25); border-radius: .75rem; }
.gym-result-energy strong { display: block; margin-top: .2rem; color: #ffd47b; font-size: 1.35rem; }

.gym-option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.gym-option { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 17rem; padding: clamp(1.25rem, 3vw, 1.8rem); background: rgba(13, 17, 24, .93); border: 1px solid rgba(255, 255, 255, .1); border-radius: 1rem; box-shadow: 0 .9rem 2rem rgba(0, 0, 0, .2); }
.gym-option::before { position: absolute; top: -4.5rem; right: -3rem; width: 12rem; height: 12rem; content: ""; border-radius: 50%; opacity: .18; }
.gym-option-attack { border-color: rgba(223, 73, 73, .3); }
.gym-option-attack::before { background: #d73333; }
.gym-option-defense { border-color: rgba(216, 170, 73, .3); }
.gym-option-defense::before { background: #d8aa49; }
.gym-option > svg { position: relative; z-index: 1; width: 2.2rem; height: 2.2rem; margin-bottom: .8rem; stroke: currentColor; stroke-width: 1.65; fill: none; }
.gym-option-attack > svg { color: #ff7777; }
.gym-option-defense > svg { color: var(--mg-gold-light); }
.gym-option h3 { font-weight: 850; }
.gym-option > p:not(.eyebrow) { max-width: 30rem; color: var(--mg-muted); }
.gym-option > strong { display: block; margin: 1rem 0; color: var(--mg-gold-light); }
.gym-option form { margin-top: auto; }
.gym-option .btn { min-width: 12.5rem; font-weight: 800; }
.gym-option .btn:disabled { cursor: not-allowed; opacity: .55; }
.gym-history { overflow: hidden; }
.gym-history .panel-heading { padding: 1.15rem 1.25rem; }

.district-copy {
    position: relative;
    z-index: 2;
    max-width: 34rem;
}

.district-copy h2 {
    font-weight: 800;
}

.district-copy p:last-child {
    color: var(--mg-muted);
}

.district-lights {
    position: absolute;
    right: 10%;
    bottom: 16%;
    display: flex;
    align-items: flex-end;
    gap: 1.8rem;
}

.district-lights span {
    display: block;
    width: .35rem;
    height: .35rem;
    background: var(--mg-gold-light);
    border-radius: 50%;
    box-shadow: 0 0 .7rem .25rem rgba(241, 207, 122, .42);
    animation: city-flicker 3.2s ease-in-out infinite;
}

.district-lights span:nth-child(2) { margin-bottom: 1.5rem; animation-delay: .5s; }
.district-lights span:nth-child(3) { margin-bottom: .6rem; animation-delay: 1.2s; }
.district-lights span:nth-child(4) { margin-bottom: 2.2rem; animation-delay: .8s; }
.district-lights span:nth-child(5) { margin-bottom: 1rem; animation-delay: 1.7s; }

.bank-hero {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.25rem;
    overflow: hidden;
    margin-bottom: 1.25rem;
    padding: clamp(1.4rem, 3.5vw, 2.5rem);
    background:
        linear-gradient(105deg, rgba(9, 12, 18, .98), rgba(14, 18, 25, .86) 60%, rgba(34, 24, 11, .74)),
        url("../assets/images/auth-city-bg.jpg") center 70% / cover no-repeat;
    border: 1px solid rgba(216, 170, 73, .35);
    border-radius: 1rem;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .42);
    animation: panel-arrive .6s cubic-bezier(.2, .8, .2, 1) both;
}

.bank-hero::after {
    position: absolute;
    top: -45%;
    right: 8%;
    width: 15rem;
    height: 15rem;
    content: "";
    background: rgba(216, 170, 73, .12);
    border-radius: 50%;
    filter: blur(2.5rem);
    animation: ambient-pulse 6s ease-in-out infinite;
}

.bank-seal {
    position: relative;
    z-index: 1;
    display: grid;
    width: clamp(3.8rem, 8vw, 5rem);
    height: clamp(3.8rem, 8vw, 5rem);
    place-items: center;
    color: #1a1307;
    background: linear-gradient(145deg, var(--mg-gold-light), #a56e20);
    border: 2px solid rgba(255, 232, 174, .38);
    border-radius: 50%;
    box-shadow: 0 0 2rem rgba(216, 170, 73, .25);
}

.bank-seal svg {
    width: 2.25rem;
    height: 2.25rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
}

.bank-hero-copy,
.bank-balance {
    position: relative;
    z-index: 1;
}

.bank-hero h1 {
    margin-bottom: .4rem;
    font-size: clamp(1.75rem, 4vw, 2.6rem);
    font-weight: 850;
}

.bank-hero-copy > p:last-child {
    margin: 0;
    color: var(--mg-muted);
}

.bank-balance {
    min-width: 13rem;
    padding: 1rem 1.2rem;
    text-align: right;
    background: rgba(6, 8, 12, .68);
    border: 1px solid rgba(216, 170, 73, .28);
    border-radius: .8rem;
    backdrop-filter: blur(10px);
}

.bank-balance span,
.bank-balance small {
    display: block;
    color: var(--mg-muted);
}

.bank-balance span {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.bank-balance strong {
    display: block;
    margin: .15rem 0;
    color: var(--mg-gold-light);
    font-size: clamp(1.45rem, 3vw, 2rem);
}

.bank-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
    margin-bottom: 1.25rem;
}

.bank-summary > div {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .2rem .75rem;
    padding: 1rem 1.1rem;
    background: rgba(16, 21, 31, .94);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: .8rem;
    box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .22);
}

.bank-summary svg {
    grid-row: 1 / 3;
    align-self: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--mg-gold-light);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.65;
}

.bank-summary span {
    color: var(--mg-muted);
    font-size: .72rem;
    font-weight: 750;
    text-transform: uppercase;
}

.bank-summary strong {
    font-size: 1.08rem;
}

.bank-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.bank-action:nth-child(2) {
    animation-delay: .08s;
}

.transfer-action {
    grid-column: 1 / -1;
    animation-delay: .16s;
}

.money-input {
    position: relative;
}

.money-input .form-control {
    padding-right: 3rem;
    font-size: 1.05rem;
    font-weight: 750;
}

.money-input > span {
    position: absolute;
    top: 50%;
    right: 1rem;
    color: var(--mg-gold-light);
    font-weight: 850;
    transform: translateY(-50%);
}

.bank-history {
    margin-top: 0;
}

.bank-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--mg-text);
    --bs-table-border-color: rgba(255, 255, 255, .08);
    min-width: 45rem;
}

.bank-table thead th {
    color: var(--mg-muted);
    border-bottom-color: rgba(216, 170, 73, .28);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.bank-table tbody tr {
    transition: background .2s ease;
}

.bank-table tbody tr:hover {
    background: rgba(216, 170, 73, .045);
}

.money-change {
    font-weight: 800;
}

.money-change.credit {
    color: #6ee0a4;
}

.money-change:not(.credit) {
    color: #f29168;
}

.empty-history {
    margin: 0;
    padding: 1.4rem;
    color: var(--mg-muted);
    text-align: center;
    background: rgba(255, 255, 255, .025);
    border: 1px dashed rgba(255, 255, 255, .12);
    border-radius: .75rem;
}

/* Activitate */
.activity-hero {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem;
    overflow: hidden;
    margin-bottom: 1.25rem;
    padding: clamp(1.4rem, 3.5vw, 2.5rem);
    background: linear-gradient(112deg, rgba(11, 47, 61, .98), rgba(14, 22, 34, .94) 58%, rgba(41, 26, 13, .88));
    border: 1px solid rgba(102, 216, 228, .35);
    border-radius: 1rem;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .38);
    animation: panel-arrive .6s cubic-bezier(.2, .8, .2, 1) both;
}

.activity-hero::after {
    position: absolute;
    top: -7rem;
    right: 18%;
    width: 18rem;
    height: 18rem;
    pointer-events: none;
    content: "";
    background: rgba(75, 210, 229, .16);
    border-radius: 50%;
    filter: blur(2.8rem);
    animation: ambient-pulse 6s ease-in-out infinite;
}

.activity-hero-mark,
.activity-result-emblem {
    position: relative;
    z-index: 1;
    display: grid;
    flex: 0 0 auto;
    width: clamp(3.8rem, 8vw, 5rem);
    height: clamp(3.8rem, 8vw, 5rem);
    place-items: center;
    color: #07232b;
    background: linear-gradient(145deg, #9af3f7, #3c9eb1);
    border: 2px solid rgba(214, 255, 255, .35);
    border-radius: 50%;
    box-shadow: 0 0 2rem rgba(78, 214, 229, .22);
}

.activity-hero-mark svg,
.activity-result-emblem svg,
.activity-hand,
.activity-claim-button svg,
.activity-leaderboard-heading > svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.65;
}

.activity-hero-mark svg,
.activity-result-emblem svg { width: 2.25rem; height: 2.25rem; }
.activity-hero-copy,
.activity-total { position: relative; z-index: 1; }
.activity-hero h1 { margin-bottom: .4rem; font-size: clamp(1.75rem, 4vw, 2.6rem); font-weight: 850; }
.activity-hero-copy > p:last-child { max-width: 48rem; margin: 0; color: var(--mg-muted); }

.activity-total {
    min-width: 10.5rem;
    padding: .9rem 1.1rem;
    text-align: right;
    background: rgba(4, 13, 20, .54);
    border: 1px solid rgba(123, 232, 238, .24);
    border-radius: .8rem;
    backdrop-filter: blur(10px);
}

.activity-total span,
.activity-result-values span {
    display: block;
    color: var(--mg-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.activity-total strong { display: block; margin-top: .2rem; color: #a7f7f8; font-size: clamp(1.45rem, 3vw, 2rem); }

.activity-result {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1.15rem 1.35rem;
    background: linear-gradient(110deg, rgba(37, 119, 90, .52), rgba(10, 20, 25, .96));
    border: 1px solid rgba(112, 235, 181, .4);
    border-radius: 1rem;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, .18);
    opacity: 0;
    transform: translateY(.7rem) scale(.985);
}

.activity-result.is-celebrating { animation: activity-result-arrive .65s cubic-bezier(.16, 1, .3, 1) both; }
.activity-result h2 { margin-bottom: .35rem; font-weight: 850; }
.activity-result p:last-child { margin-bottom: 0; color: var(--mg-muted); }
.activity-result-values { margin-left: auto; padding: .65rem .85rem; text-align: right; background: rgba(3, 13, 16, .3); border-radius: .7rem; }
.activity-result-values strong { display: block; color: #aaf5ca; font-size: 1.05rem; }

.activity-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(17rem, .65fr); gap: 1.25rem; margin-bottom: 1.25rem; }

.activity-action-card,
.activity-rules,
.activity-leaderboard {
    background: rgba(13, 18, 27, .94);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 1rem;
    box-shadow: 0 .9rem 2rem rgba(0, 0, 0, .2);
}

.activity-action-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 11rem;
    gap: .8rem 1rem;
    overflow: hidden;
    min-height: 17rem;
    padding: clamp(1.25rem, 3vw, 1.8rem);
    border-color: rgba(77, 198, 214, .24);
}

.activity-action-card::after {
    position: absolute;
    right: -5rem;
    bottom: -6rem;
    width: 14rem;
    height: 14rem;
    pointer-events: none;
    content: "";
    background: rgba(64, 175, 192, .11);
    border-radius: 50%;
    filter: blur(1.5rem);
}

.activity-action-copy,
.activity-hand-stage,
.activity-action-card form { position: relative; z-index: 1; }
.activity-action-copy h2 { margin-bottom: .45rem; font-weight: 850; }
.activity-action-copy > p:last-child { max-width: 34rem; margin-bottom: 0; color: var(--mg-muted); }

.activity-hand-stage {
    position: relative;
    grid-row: 1 / 3;
    grid-column: 2;
    min-height: 10rem;
    isolation: isolate;
}

.activity-hand-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 6.8rem;
    height: 6.8rem;
    background: rgba(93, 220, 231, .18);
    border-radius: 50%;
    filter: blur(1.15rem);
    transform: translate(-50%, -50%);
    animation: activity-glow 2.8s ease-in-out infinite;
}

.activity-hand {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7.3rem;
    height: 7.3rem;
    color: #a8f8f8;
    filter: drop-shadow(0 .55rem .6rem rgba(0, 0, 0, .28));
    transform: translate(-50%, -50%) rotate(-8deg);
    transform-origin: 60% 85%;
    animation: activity-hand-wave 3.8s ease-in-out infinite;
}

.activity-coin {
    position: absolute;
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    color: #352305;
    font-size: .95rem;
    font-weight: 900;
    background: linear-gradient(145deg, #fff0a4, #d69a29);
    border: 1px solid rgba(255, 249, 199, .6);
    border-radius: 50%;
    box-shadow: 0 .4rem .9rem rgba(0, 0, 0, .22);
    animation: activity-coin-float 3.5s ease-in-out infinite;
}

.activity-coin-one { top: 7%; left: 2%; animation-delay: -.5s; }
.activity-coin-two { top: 55%; right: 2%; animation-delay: -1.6s; }
.activity-coin-three { right: 26%; bottom: 0; transform: scale(.8); animation-delay: -2.4s; }

.activity-action-card form { grid-column: 1 / -1; align-self: end; }
.activity-claim-button { min-width: 13.4rem; color: #09232a; font-weight: 850; background: linear-gradient(135deg, #b9ffff, #54bfc9); border: 1px solid rgba(222, 255, 255, .55); box-shadow: 0 .55rem 1.25rem rgba(54, 190, 205, .24); }
.activity-claim-button:hover { color: #06191e; background: linear-gradient(135deg, #dcffff, #6fd5de); transform: translateY(-1px); }
.activity-claim-button svg { width: 1.15rem; height: 1.15rem; margin-right: .35rem; vertical-align: -.17rem; }
.activity-claim-button:disabled { color: rgba(255, 255, 255, .62); background: rgba(116, 135, 143, .32); border-color: rgba(255, 255, 255, .15); box-shadow: none; cursor: not-allowed; }
.activity-action-card form.is-submitting .activity-claim-button svg { animation: activity-button-wave .65s ease-in-out infinite alternate; }
.activity-form-status { min-height: 1.45rem; margin: .75rem 0 0; color: var(--mg-muted); font-size: .9rem; }

.activity-rules { padding: 1.2rem 1.25rem; }
.activity-rules .panel-heading { padding: 0 0 1rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.activity-rules ol { margin: 1.15rem 0 0; padding-left: 1.3rem; color: var(--mg-muted); }
.activity-rules li { padding-left: .15rem; }
.activity-rules li + li { margin-top: .75rem; }
.activity-rules li::marker { color: #8de6ec; font-weight: 900; }

.activity-leaderboard { overflow: hidden; }
.activity-leaderboard-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.35rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.activity-leaderboard-heading h2 { margin-bottom: .35rem; font-weight: 850; }
.activity-leaderboard-heading p:last-child { margin-bottom: 0; color: var(--mg-muted); }
.activity-leaderboard-heading > svg { width: 2.2rem; height: 2.2rem; color: #87edf1; }
.activity-table { --bs-table-bg: transparent; --bs-table-color: var(--mg-text); --bs-table-border-color: rgba(255, 255, 255, .08); min-width: 38rem; }
.activity-table thead th { color: var(--mg-muted); border-bottom-color: rgba(99, 216, 227, .28); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.activity-table tbody tr { transition: background .2s ease; }
.activity-table tbody tr:hover,
.activity-table tbody tr.is-current-player { background: rgba(79, 205, 217, .08); }
.activity-rank { display: grid; width: 2rem; height: 2rem; place-items: center; color: var(--mg-muted); font-weight: 850; background: rgba(255, 255, 255, .055); border-radius: 50%; }
.activity-rank.rank-1 { color: #3b2705; background: linear-gradient(145deg, #fff0a1, #d59b28); }
.activity-rank.rank-2 { color: #1f2830; background: linear-gradient(145deg, #e6f1f5, #96aab5); }
.activity-rank.rank-3 { color: #351a0c; background: linear-gradient(145deg, #efbc91, #aa6039); }
.activity-you { display: inline-block; margin-left: .35rem; padding: .08rem .42rem; color: #9cf4f6; font-size: .72rem; font-weight: 800; background: rgba(87, 206, 216, .12); border: 1px solid rgba(111, 223, 231, .22); border-radius: 99rem; }
.activity-points-value { color: #a8f7f8; }

/* GTA */
.gta-page .game-shell:has([data-gta-result]) .gta-cooldown { display: none; }
.gta-page .gta-result { grid-template-columns: minmax(0, 1fr); scroll-margin-top: 1rem; }
.gta-page .gta-result .gta-cost-summary { min-width: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.gta-page .gta-result .gta-cost-summary > span { flex-basis: 100%; }
.gta-page .gta-result .gta-cost-summary strong { margin: 0; }
.gta-model-reference { float: right; width: min(35%, 200px); height: auto; margin: 0 0 .75rem 1rem; border-radius: .6rem; }
.gta-cinematic { position: relative; overflow: hidden; border: 1px solid #66889650; border-radius: .8rem; background: #12232e; }
.gta-cinematic canvas { display: block; width: 100%; height: auto; aspect-ratio: 2; }
.gta-cinematic-location { position: absolute; top: .8rem; left: .8rem; color: #f7e2b5; font-size: clamp(.55rem, 1.5vw, .75rem); font-weight: 800; letter-spacing: .08em; }
.gta-cinematic-caption { position: absolute; bottom: .65rem; left: 50%; transform: translateX(-50%); max-width: 95%; padding: .3rem .7rem; border-radius: 2rem; color: #fff0d0; background: #071018de; text-align: center; font-size: clamp(.65rem, 1.6vw, .9rem); }
@media (prefers-reduced-motion: reduce) { .gta-page .gta-result.is-revealed, .gta-page .gta-result.is-leaving { animation: none; } }
@media (max-width: 575.98px) {
    .gta-model-reference { float: none; display: block; width: min(100%, 18rem); margin: 0 auto 1rem; }
    .gta-cinematic-location { top: .55rem; left: .6rem; max-width: calc(100% - 1.2rem); }
    .gta-cinematic-caption { bottom: .45rem; max-width: calc(100% - .8rem); white-space: normal; }
}
.gta-page main {
    background: radial-gradient(circle at 86% 12%, rgba(197, 44, 44, .12), transparent 26rem), radial-gradient(circle at 12% 32%, rgba(48, 114, 151, .12), transparent 29rem);
}

.gta-hero {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.2rem;
    overflow: hidden;
    margin-bottom: 1.25rem;
    padding: clamp(1.4rem, 3.5vw, 2.5rem);
    background: linear-gradient(110deg, rgba(55, 17, 21, .98), rgba(16, 20, 29, .96) 57%, rgba(13, 45, 61, .9));
    border: 1px solid rgba(224, 83, 77, .33);
    border-radius: 1rem;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .42);
    animation: panel-arrive .6s cubic-bezier(.2, .8, .2, 1) both;
}

.gta-hero::after {
    position: absolute;
    top: -8rem;
    right: 22%;
    width: 18rem;
    height: 18rem;
    pointer-events: none;
    content: "";
    background: rgba(219, 71, 70, .16);
    border-radius: 50%;
    filter: blur(3rem);
    animation: ambient-pulse 6s ease-in-out infinite;
}

.gta-hero-icon,
.gta-failed-emblem {
    position: relative;
    z-index: 1;
    display: grid;
    width: clamp(3.8rem, 8vw, 5rem);
    height: clamp(3.8rem, 8vw, 5rem);
    place-items: center;
    color: #250b0c;
    background: linear-gradient(145deg, #ffb18d, #c54242);
    border: 2px solid rgba(255, 216, 202, .32);
    border-radius: .85rem;
    box-shadow: 0 0 2rem rgba(226, 70, 66, .24);
    transform: rotate(-4deg);
}

.gta-hero-icon svg,
.gta-failed-emblem svg,
.gta-option-scene svg,
.gta-option button svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.65;
}

.gta-hero-icon svg,
.gta-failed-emblem svg { width: 2.35rem; height: 2.35rem; }
.gta-hero-copy,
.gta-record { position: relative; z-index: 1; }
.gta-hero h1 { margin-bottom: .4rem; font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 850; }
.gta-hero-copy > p:last-child { max-width: 50rem; margin: 0; color: var(--mg-muted); }

.gta-record {
    min-width: 11.4rem;
    padding: .85rem 1rem;
    text-align: right;
    background: rgba(5, 9, 15, .5);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: .8rem;
    backdrop-filter: blur(10px);
}

.gta-record span,
.gta-cost-summary > span,
.gta-result-values span,
.gta-chance span {
    display: block;
    color: var(--mg-muted);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.gta-record strong { display: block; margin-top: .25rem; color: #ffd8c0; font-size: 1.15rem; }
.gta-record i { padding: 0 .2rem; color: #c77f7e; font-style: normal; }
.gta-cooldown { position: relative; z-index: 1; grid-column: 1 / -1; }
.gta-cooldown .live-countdown { margin-top: 0; }

.gta-result {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(16rem, .65fr);
    align-items: stretch;
    gap: 1.1rem;
    overflow: hidden;
    margin-bottom: 1.25rem;
    padding: 1.15rem;
    background: rgba(12, 17, 25, .96);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 1rem;
    box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .28);
    opacity: 1;
    transform: none;
}

.gta-result.is-revealed { animation: gta-result-arrive .68s cubic-bezier(.16, 1, .3, 1) both; }
.gta-result.is-leaving { pointer-events: none; animation: gta-result-leave .55s cubic-bezier(.4, 0, 1, 1) both; }
.gta-result-success { border-color: rgba(83, 219, 149, .38); }
.gta-result-failed { grid-template-columns: auto minmax(0, 1fr) minmax(13rem, auto); align-items: center; border-color: rgba(231, 100, 91, .42); }

.gta-vehicle-scene {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    min-height: clamp(16rem, 32vw, 23rem);
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: .8rem;
}

.gta-vehicle-scene.location-underground {
    background: linear-gradient(180deg, rgba(9, 12, 18, .1), rgba(7, 8, 12, .86)), repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 5.5rem), linear-gradient(145deg, #3f4651, #11151d 55%, #050609);
}

.gta-vehicle-scene.location-street {
    background: linear-gradient(180deg, rgba(15, 31, 43, .12), rgba(8, 11, 15, .84)), repeating-linear-gradient(90deg, transparent 0 4rem, rgba(255, 211, 106, .44) 4rem 5.2rem, transparent 5.2rem 9rem), linear-gradient(152deg, #28465b 0 47%, #22262c 47% 100%);
}

.gta-vehicle-scene::before {
    position: absolute;
    z-index: -1;
    top: 1.6rem;
    right: 0;
    left: 0;
    height: .18rem;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(255, 241, 188, .78), transparent);
    box-shadow: 0 3.6rem 1rem rgba(255, 232, 156, .22), 0 7.2rem 1rem rgba(255, 232, 156, .18);
}

.location-street::before { top: 12%; background: linear-gradient(90deg, transparent, rgba(151, 222, 255, .66), transparent); box-shadow: 0 3rem 1rem rgba(91, 172, 218, .18); }
.gta-vehicle-scene::after { position: absolute; z-index: 0; right: -25%; bottom: 13%; left: -25%; height: 2.6rem; pointer-events: none; content: ""; opacity: 0; }
.location-street::after { background: repeating-linear-gradient(90deg, transparent 0 2.8rem, rgba(255, 232, 157, .72) 2.8rem 4.1rem, transparent 4.1rem 7.4rem); filter: blur(.08rem); transform: skewX(-18deg); animation: gta-street-speed-lines 1.3s ease-out .12s both; }
.location-underground::after { bottom: 23%; height: 5.5rem; background: linear-gradient(90deg, transparent 0 22%, rgba(255, 238, 174, .06) 32%, rgba(255, 249, 209, .65) 50%, rgba(255, 238, 174, .06) 68%, transparent 78%); filter: blur(.55rem); animation: gta-garage-light-sweep 1.15s ease-out .12s both; }
.gta-scene-sign { position: absolute; z-index: 3; top: 1rem; left: 1rem; padding: .32rem .52rem; color: #ffe7b2; font-size: .7rem; font-weight: 900; letter-spacing: .12em; background: rgba(5, 7, 10, .64); border: 1px solid rgba(255, 231, 171, .25); border-radius: .35rem; text-transform: uppercase; }

.gta-car-image {
    position: relative;
    z-index: 1;
    width: min(79%, 38rem);
    max-height: 20rem;
    margin: 2rem .4rem -.1rem 0;
    object-fit: contain;
    object-position: right bottom;
    filter: drop-shadow(0 1.2rem .75rem rgba(0, 0, 0, .48));
    animation: gta-car-arrive .85s cubic-bezier(.16, 1, .3, 1) .08s both;
}

.location-street .gta-car-image { animation: gta-street-getaway 1.35s cubic-bezier(.14, .82, .24, 1) .08s both; }
.location-underground .gta-car-image { animation: gta-garage-pullout 1.18s cubic-bezier(.16, 1, .3, 1) .08s both; }

.gta-player-presence {
    position: absolute;
    z-index: 2;
    bottom: -.55rem;
    left: clamp(.4rem, 2vw, 1.8rem);
    display: grid;
    justify-items: center;
    width: clamp(12rem, 25vw, 17rem);
    transform-origin: bottom left;
    animation: gta-character-arrive .72s cubic-bezier(.16, 1, .3, 1) .45s both;
}

.gta-player-character {
    display: block;
    width: 100%;
    max-height: none;
    object-fit: contain;
    object-position: bottom center;
    image-rendering: pixelated;
    filter: drop-shadow(0 .9rem .6rem rgba(0, 0, 0, .72));
}

.gta-player-name { position: relative; z-index: 1; margin-top: -1.05rem; padding: .2rem .5rem; color: #fff0cf; font-size: .66rem; font-weight: 900; letter-spacing: .07em; background: rgba(4, 7, 11, .72); border: 1px solid rgba(255, 234, 181, .24); border-radius: 99rem; text-transform: uppercase; }
.gta-player-sprite { display: block; width: clamp(7.1rem, 15vw, 9.6rem); aspect-ratio: 1; background-repeat: no-repeat; image-rendering: pixelated; filter: drop-shadow(0 .85rem .58rem rgba(0, 0, 0, .72)); }
.gta-character-baiat1 { width: clamp(7.1rem, 15vw, 9.6rem); }.gta-character-baiat1 .gta-player-sprite { background-image: url("../2d/baiat1/Player tile/Character 120x120 (1).png"); background-size: 1000% 1600%; animation: gta-baiat-idle 1s steps(10) infinite; }
.gta-character-fata1 { width: clamp(6.2rem, 13vw, 8.5rem); }.gta-character-fata1 .gta-player-sprite { width: 100%; background-image: url("../2d/fata1/Player tile/Player 96X96 (1).png"); background-size: 1000% 1900%; animation: gta-fata-idle .9s steps(10) infinite; }
.location-street .gta-player-presence { left: clamp(.15rem, 1.5vw, 1.2rem); }
.location-underground .gta-player-presence { left: clamp(.7rem, 3vw, 2.4rem); }
.gta-scratches { position: absolute; z-index: 3; right: 10%; bottom: 20%; width: 36%; height: 20%; pointer-events: none; opacity: 0; background: repeating-linear-gradient(167deg, transparent 0 .55rem, rgba(245, 245, 245, .72) .58rem .64rem, transparent .69rem 1.2rem); mix-blend-mode: screen; transform: rotate(-6deg); }
.damage-light .gta-car-image { filter: saturate(.82) contrast(.94) drop-shadow(0 1.2rem .75rem rgba(0, 0, 0, .48)); }
.damage-medium .gta-car-image { filter: saturate(.58) brightness(.86) contrast(.98) drop-shadow(0 1.2rem .75rem rgba(0, 0, 0, .5)); }
.damage-heavy .gta-car-image { filter: grayscale(.5) saturate(.38) brightness(.69) contrast(1.08) drop-shadow(0 1.2rem .75rem rgba(0, 0, 0, .55)); }
.damage-medium .gta-scratches { opacity: .46; }
.damage-heavy .gta-scratches { opacity: .78; }

.gta-result-copy { align-self: center; }
.gta-result-copy h2 { margin-bottom: .45rem; font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 850; }
.gta-result-copy > p:last-child { margin-bottom: 0; color: var(--mg-muted); }
.gta-result-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin-top: 1rem; }
.gta-result-values > div { padding: .65rem; background: rgba(255, 255, 255, .045); border-radius: .55rem; }
.gta-result-values strong { display: block; margin-top: .2rem; color: #abf4ce; font-size: .95rem; }

.gta-cost-summary { align-self: center; padding: .85rem; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .09); border-radius: .7rem; }
.gta-cost-summary strong { display: block; max-width: 14rem; margin-top: .4rem; color: #ffc1b5; font-size: .9rem; line-height: 1.35; }
.gta-result-failed .gta-cost-summary { min-width: 13rem; }

.gta-option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.gta-option { position: relative; display: grid; grid-template-columns: 8.2rem minmax(0, 1fr); gap: 1rem; overflow: hidden; min-height: 16rem; padding: 1.25rem; background: rgba(13, 18, 27, .95); border: 1px solid rgba(255, 255, 255, .1); border-radius: 1rem; box-shadow: 0 .9rem 2rem rgba(0, 0, 0, .22); animation: stat-rise .6s cubic-bezier(.2, .8, .2, 1) both; }
.gta-option:nth-child(2) { animation-delay: .08s; }
.gta-option::after { position: absolute; right: -4.6rem; bottom: -5rem; width: 13rem; height: 13rem; pointer-events: none; content: ""; border-radius: 50%; filter: blur(1.2rem); opacity: .2; }
.gta-underground { border-color: rgba(222, 79, 72, .3); }
.gta-underground::after { background: #e4554e; }
.gta-street { border-color: rgba(219, 172, 76, .27); }
.gta-street::after { background: #ddb252; }

.gta-option-scene { position: relative; display: grid; min-height: 8rem; place-items: center; align-self: start; overflow: hidden; color: #e8f4ff; background: linear-gradient(160deg, #283542, #0a0d12); border: 1px solid rgba(255, 255, 255, .12); border-radius: .7rem; }
.gta-option-scene::after { position: absolute; right: 0; bottom: 17%; left: 0; height: .15rem; content: ""; background: rgba(255, 240, 171, .48); box-shadow: 0 1.5rem 0 rgba(255, 255, 255, .11); }
.gta-street .gta-option-scene { background: linear-gradient(160deg, #35617a, #171b21 72%); }
.gta-option-scene > span { position: absolute; top: .45rem; left: .55rem; color: rgba(255, 247, 215, .8); font-size: .75rem; font-weight: 900; letter-spacing: .1em; }
.gta-option-scene svg { position: relative; z-index: 1; width: 4rem; height: 4rem; color: #fff0cb; filter: drop-shadow(0 .45rem .3rem rgba(0, 0, 0, .45)); }
.gta-option-scene i { position: absolute; top: 18%; width: .26rem; height: .26rem; background: #fff6be; border-radius: 50%; box-shadow: 0 0 .6rem .16rem rgba(255, 237, 163, .62); animation: gta-light-flicker 2.5s ease-in-out infinite; }
.gta-option-scene i:nth-of-type(1) { left: 18%; }
.gta-option-scene i:nth-of-type(2) { right: 17%; animation-delay: -1.1s; }

.gta-option-copy { position: relative; z-index: 1; }
.gta-option h3 { margin-bottom: .45rem; font-weight: 850; }
.gta-option-copy > p:not(.eyebrow) { margin-bottom: .85rem; color: var(--mg-muted); }
.gta-chance { display: inline-block; padding: .5rem .65rem; background: rgba(0, 0, 0, .26); border: 1px solid rgba(255, 255, 255, .1); border-radius: .55rem; }
.gta-chance strong { display: block; margin-top: .08rem; color: #aef5f7; font-size: 1.3rem; }
.gta-option form { position: relative; z-index: 1; grid-column: 1 / -1; align-self: end; }
.gta-option .btn { min-width: 13.5rem; font-weight: 850; }
.gta-option .btn svg { width: 1.1rem; height: 1.1rem; margin-right: .32rem; vertical-align: -.16rem; }
.gta-option .btn:disabled { cursor: not-allowed; opacity: .55; }
.gta-option form.is-submitting .btn svg { animation: gta-car-bump .55s ease-in-out infinite alternate; }

.gta-risk-note { display: flex; align-items: center; gap: .55rem; margin: 1.1rem 0 0; padding: .8rem .95rem; color: #d9e2e5; background: rgba(18, 24, 34, .92); border: 1px solid rgba(255, 255, 255, .08); border-radius: .75rem; }
.gta-risk-note svg { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; color: #ffb278; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.65; }

/* Cronometre live pentru toate limitele de joc */
.live-countdown {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    width: fit-content;
    max-width: 100%;
    margin-top: .35rem;
    padding: .38rem .58rem;
    color: #e7fcff;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    background: rgba(50, 180, 196, .12);
    border: 1px solid rgba(120, 232, 240, .3);
    border-radius: .6rem;
    box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 .3rem .9rem rgba(0, 0, 0, .16);
}

.live-countdown svg {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    color: #93f2f5;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
    transform-origin: center;
    animation: live-clock-tick 1s ease-in-out infinite;
}

.live-countdown-label {
    color: #b9cbd1;
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.live-countdown .live-countdown-value {
    display: inline;
    margin: 0;
    color: #e7fcff;
    font-size: .9rem;
    font-weight: 900;
    white-space: nowrap;
}

.live-countdown.is-ready {
    color: #d5ffe6;
    background: rgba(73, 194, 126, .18);
    border-color: rgba(117, 234, 165, .42);
}

.live-countdown.is-ready svg { color: #aef4cd; animation: none; }
.live-countdown-hero { display: inline-flex; margin-top: .55rem; }
.live-countdown-inline { margin: .42rem .2rem 0 0; vertical-align: middle; }
.live-countdown-compact { justify-content: center; margin-inline: auto; }
.gym-readiness .live-countdown,
.combat-daily-counter .live-countdown {
    display: inline-flex;
    justify-content: center;
    color: #e7fcff;
    letter-spacing: normal;
    text-transform: none;
}

.gym-readiness .live-countdown-label,
.combat-daily-counter .live-countdown-label {
    display: inline;
    color: #b9cbd1;
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}
.target-blocked .live-countdown { margin-top: .55rem; font-size: .78rem; white-space: normal; }
.target-blocked .live-countdown-label { font-size: .62rem; }

@keyframes panel-arrive {
    from { opacity: 0; transform: translateY(1.25rem) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes stat-rise {
    from { opacity: 0; transform: translateY(1rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes meter-fill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes ambient-pulse {
    0%, 100% { opacity: .45; transform: scale(.9); }
    50% { opacity: 1; transform: scale(1.12); }
}

@keyframes rain-drift {
    from { background-position: 0 -20rem; }
    to { background-position: 18rem 35rem; }
}

@keyframes button-shine {
    0%, 68% { left: -35%; opacity: 0; }
    72% { opacity: .65; }
    88%, 100% { left: 125%; opacity: 0; }
}

@keyframes city-flicker {
    0%, 100% { opacity: .3; transform: scale(.8); }
    45% { opacity: 1; transform: scale(1.15); }
}

@keyframes online-pulse {
    0%, 100% { opacity: .55; transform: scale(.85); }
    50% { opacity: 1; transform: scale(1.08); }
}

@keyframes activity-result-arrive {
    0% { opacity: 0; transform: translateY(.7rem) scale(.985); }
    64% { opacity: 1; transform: translateY(-.18rem) scale(1.01); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes activity-hand-wave {
    0%, 100% { transform: translate(-50%, -50%) rotate(-8deg); }
    42% { transform: translate(-48%, -55%) rotate(8deg); }
    58% { transform: translate(-50%, -50%) rotate(-2deg); }
}

@keyframes activity-coin-float {
    0%, 100% { translate: 0 0; opacity: .82; }
    50% { translate: 0 -.7rem; opacity: 1; }
}

@keyframes activity-glow {
    0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.88); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
}

@keyframes activity-button-wave {
    from { transform: rotate(-7deg) translateX(-1px); }
    to { transform: rotate(7deg) translateX(1px); }
}

@keyframes live-clock-tick {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(103, 238, 243, 0)); transform: rotate(-5deg) scale(.96); }
    50% { filter: drop-shadow(0 0 .3rem rgba(103, 238, 243, .52)); transform: rotate(5deg) scale(1.04); }
}

@keyframes gta-result-arrive {
    0% { opacity: 0; transform: translateY(.9rem) scale(.985); }
    68% { opacity: 1; transform: translateY(-.15rem) scale(1.008); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes gta-result-leave {
    from { opacity: 1; transform: translateY(0) scale(1); max-height: 40rem; margin-bottom: 1.25rem; padding-top: 1.15rem; padding-bottom: 1.15rem; }
    to { opacity: 0; transform: translateY(-.75rem) scale(.98); max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; }
}

@keyframes gta-baiat-idle { to { background-position: 100% 0; } }
@keyframes gta-fata-idle { to { background-position: 100% 0; } }

@keyframes gta-car-arrive {
    from { opacity: 0; transform: translateX(2.5rem) scale(.94); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes gta-street-getaway {
    0% { opacity: 0; transform: translateX(-125%) scale(.88); }
    28% { opacity: 1; transform: translateX(-18%) scale(.98); }
    58% { opacity: 1; transform: translateX(3%) scale(1.025); }
    78% { opacity: 1; transform: translateX(-1.2%) scale(.995); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes gta-garage-pullout {
    0% { opacity: 0; transform: translate(-34%, 20%) scale(.82); }
    36% { opacity: 1; transform: translate(-12%, 5%) scale(.95); }
    68% { opacity: 1; transform: translate(2%, -1%) scale(1.02); }
    100% { opacity: 1; transform: translate(0) scale(1); }
}

@keyframes gta-street-speed-lines {
    0% { opacity: 0; transform: translateX(-25%) skewX(-18deg); }
    28% { opacity: .9; }
    100% { opacity: 0; transform: translateX(34%) skewX(-18deg); }
}

@keyframes gta-garage-light-sweep {
    0% { opacity: 0; transform: translateX(-55%) scaleX(.55); }
    36% { opacity: .82; }
    100% { opacity: 0; transform: translateX(58%) scaleX(1.2); }
}

@keyframes gta-character-arrive {
    from { opacity: 0; transform: translateY(1.5rem) scale(.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes gta-light-flicker {
    0%, 100% { opacity: .42; transform: scale(.85); }
    48% { opacity: 1; transform: scale(1.15); }
}

@keyframes gta-car-bump {
    from { transform: translateX(-2px); }
    to { transform: translateX(2px); }
}

@keyframes critical-pulse {
    0%, 100% { filter: drop-shadow(0 0 0 transparent); opacity: .78; }
    50% { filter: drop-shadow(0 0 .6rem var(--vital-color)); opacity: 1; }
}

@media (max-width: 991.98px) {
    .game-nav-toggle:not([hidden]) {
        display: flex;
    }

    .game-nav-inner {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .game-nav.has-mobile-toggle .game-nav-inner {
        display: none;
    }

    .game-nav.has-mobile-toggle.is-open .game-nav-inner {
        display: grid;
    }

    .game-nav-link {
        flex-direction: column;
        gap: .25rem;
        width: 100%;
        min-width: 0;
        min-height: 3.5rem;
        padding: .6rem .35rem;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
        font-size: .81rem;
        text-align: center;
    }

    .game-nav-logout {
        grid-column: 1 / -1;
        margin-left: 0;
    }

    .game-nav-logout .game-nav-link {
        flex-direction: row;
        border-left: 0;
    }

    .stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .settings-grid,
    .hq-grid {
        grid-template-columns: 1fr;
    }

    .birth-panel,
    .finance-panel {
        grid-column: auto;
    }

    .bank-hero {
        grid-template-columns: auto 1fr;
    }

    .bank-balance {
        grid-column: 1 / -1;
        text-align: left;
    }

    .combat-record-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .activity-layout {
        grid-template-columns: 1fr;
    }

    .gta-result {
        grid-template-columns: 1fr;
    }

    .gta-result-failed {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .gta-result-failed .gta-cost-summary {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .hud-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-inline: 0;
    }

    .hud-item {
        border-bottom: 1px solid rgba(255, 255, 255, .06);
    }

    .hud-item:nth-child(2) {
        border-right: 0;
    }

    .hud-item:nth-child(3),
    .hud-item:nth-child(4) {
        border-bottom: 0;
    }
}

@media (max-width: 575.98px) {
    .site-header .container {
        padding-inline: 1rem;
    }

    .auth-section {
        align-items: start;
        padding-top: 1rem;
    }

    .auth-panel {
        padding: 1.25rem;
        border-radius: .75rem;
    }

    .brand {
        font-size: .95rem;
        letter-spacing: .04em;
    }

    .brand-mark {
        width: 2.35rem;
        height: 2.1rem;
    }

    .online-player {
        max-width: 7rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hud-item {
        grid-template-columns: 1.1rem minmax(0, 1fr);
        column-gap: .45rem;
        padding: .65rem .55rem;
    }

    .hud-icon {
        width: 1.1rem;
        height: 1.1rem;
    }

    .hud-label {
        font-size: .62rem;
        letter-spacing: .05em;
    }

    .hud-item strong {
        overflow-wrap: anywhere;
        font-size: .84rem;
        line-height: 1.25;
        text-overflow: clip;
        white-space: normal;
    }

    .hud-meter {
        right: .55rem;
        left: 2.1rem;
    }

    .game-nav-inner {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding-inline: 0;
    }

    .game-nav-link {
        font-size: .8rem;
    }

    .dashboard-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-hero form,
    .dashboard-hero .btn {
        width: 100%;
    }

    .combat-hero,
    .combat-result-heading,
    .gym-hero,
    .gym-scene-heading,
    .gym-result,
    .activity-result {
        align-items: stretch;
        flex-direction: column;
    }

    .combat-daily-counter {
        width: 100%;
    }

    .combat-result-heading .btn {
        width: 100%;
    }

    .gym-scene-heading .btn {
        width: 100%;
    }

    .combat-scene canvas,
    .gym-scene canvas {
        min-height: 13.5rem;
    }

    .combat-outcome-grid,
    .combat-record-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gym-option-grid {
        grid-template-columns: 1fr;
    }

    .gym-option .btn {
        width: 100%;
    }

    .attack-target {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .attack-target-action {
        grid-column: 1 / -1;
        text-align: left;
    }

    .attack-target-action .btn,
    .attack-target-action form {
        width: 100%;
    }

    .character-stage {
        align-items: flex-start;
    }

    .character-stage-preview {
        width: 5.5rem;
        height: 5.5rem;
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
    }

    .stat-card {
        min-height: 8.6rem;
        padding: 1rem;
    }

    .district-panel {
        min-height: 15rem;
        background-position: 62% center;
    }

    .hq-heading {
        align-items: flex-start;
    }

    .dossier-list > div {
        grid-template-columns: 1fr;
        gap: .2rem;
    }

    .combat-numbers,
    .money-row {
        grid-template-columns: 1fr;
    }

    .wealth-total {
        align-items: flex-start;
        flex-direction: column;
    }

    .bank-hero {
        grid-template-columns: 1fr;
    }

    .activity-hero {
        grid-template-columns: auto 1fr;
    }

    .gta-hero {
        grid-template-columns: auto 1fr;
    }

    .gta-record {
        grid-column: 1 / -1;
        text-align: left;
    }

    .gta-option-grid,
    .gta-result-values {
        grid-template-columns: 1fr;
    }

    .gta-option {
        grid-template-columns: 6.8rem minmax(0, 1fr);
    }

    .gta-option .btn { width: 100%; }

    .gta-vehicle-scene { min-height: 15rem; }

    .gta-car-image { width: 84%; }

    .activity-total {
        grid-column: 1 / -1;
        text-align: left;
    }

    .activity-result-values {
        width: 100%;
        margin-left: 0;
        text-align: left;
    }

    .activity-action-card {
        grid-template-columns: minmax(0, 1fr) 8rem;
    }

    .activity-hand {
        width: 5.9rem;
        height: 5.9rem;
    }

    .activity-coin { width: 1.6rem; height: 1.6rem; font-size: .78rem; }

    .activity-claim-button { width: 100%; }

    .bank-seal {
        width: 3.6rem;
        height: 3.6rem;
    }

    .bank-summary,
    .bank-actions-grid {
        grid-template-columns: 1fr;
    }

    .transfer-action {
        grid-column: auto;
    }

    .row-mobile-gap {
        row-gap: 1rem;
    }
}

@media (max-width: 359.98px) {
    .game-nav-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Airport / city change */
.airport-page {
    background:
        radial-gradient(circle at 75% 18%, rgba(26, 83, 117, .18), transparent 24rem),
        linear-gradient(145deg, #070a10 0%, #0a1019 50%, #070b11 100%);
}

.airport-shell,
.airport-flight-page {
    position: relative;
    z-index: 1;
}

.airport-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, .38fr);
    gap: 2rem;
    align-items: end;
    min-height: 23rem;
    padding: clamp(1.5rem, 4.5vw, 4rem);
    overflow: hidden;
    border: 1px solid rgba(193, 212, 231, .18);
    border-radius: 1.35rem;
    background: #080d13;
    box-shadow: 0 1.6rem 4rem rgba(0, 0, 0, .37);
    isolation: isolate;
}

.airport-hero-backdrop,
.airport-hero::before,
.airport-hero::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
}

.airport-hero-backdrop {
    background:
        linear-gradient(90deg, rgba(4, 8, 13, .92), rgba(4, 8, 13, .43) 58%, rgba(4, 8, 13, .18)),
        linear-gradient(0deg, rgba(3, 7, 12, .74), transparent 60%),
        url("../assets/images/airport-terminal.png") center / cover no-repeat;
    transform: scale(1.02);
    animation: airport-slow-pan 22s ease-in-out infinite alternate;
}

.airport-hero::before {
    opacity: .35;
    background: repeating-linear-gradient(115deg, transparent 0 42px, rgba(255, 215, 139, .08) 43px 44px, transparent 45px 87px);
    animation: airport-light-scan 10s linear infinite;
}

.airport-hero::after {
    inset: auto 0 0;
    height: 38%;
    background: linear-gradient(transparent, rgba(3, 6, 9, .86));
}

.airport-hero-content {
    position: relative;
    max-width: 44rem;
    animation: airport-rise .65s .08s both;
}

.airport-hero h1 {
    margin-bottom: .7rem;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 850;
    letter-spacing: -.045em;
}

.airport-hero p:not(.eyebrow) {
    max-width: 38rem;
    margin-bottom: 0;
    color: rgba(239, 245, 250, .82);
    font-size: 1.04rem;
}

.airport-status-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .85rem;
    align-items: center;
    padding: 1.05rem 1.2rem;
    border: 1px solid rgba(216, 170, 73, .29);
    border-radius: 1rem;
    background: rgba(7, 13, 20, .76);
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .24);
    backdrop-filter: blur(14px);
    animation: airport-rise .65s .2s both;
}

.airport-status-card > svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-width: 1.5; }
.airport-status-card > div { display: grid; gap: .18rem; }
.airport-status-card span:not(.airport-status-dot) { color: var(--mg-muted); font-size: .7rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.airport-status-card strong { font-size: .94rem; }
.airport-status-card.is-open { color: #d8b368; }
.airport-status-card.is-closed { color: #e28787; }

.airport-status-dot,
.airport-live-dot {
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 .25rem rgba(255,255,255,.08), 0 0 1.1rem currentColor;
    animation: airport-pulse 1.8s ease-in-out infinite;
}

.airport-arrival-message {
    display: flex;
    gap: .6rem;
    align-items: center;
    margin-bottom: 1.25rem;
    padding: .9rem 1.15rem;
    color: #d7f5de;
    border: 1px solid rgba(113, 202, 137, .35);
    border-radius: .8rem;
    background: rgba(32, 106, 55, .19);
    animation: airport-rise .5s both;
}
.airport-arrival-message svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.7; }

.airport-unowned,
.airport-booking,
.airport-owner-dashboard {
    margin-top: 1.35rem;
    border: 1px solid rgba(194, 210, 226, .15);
    border-radius: 1.2rem;
    background: linear-gradient(135deg, rgba(21, 31, 43, .94), rgba(9, 14, 22, .98));
    box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, .22);
}

.airport-unowned {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(13rem, .36fr);
    gap: 1.4rem;
    align-items: center;
    padding: clamp(1.25rem, 3vw, 2rem);
    border-color: rgba(194, 103, 103, .27);
    animation: airport-rise .65s .16s both;
}

.airport-lock-emblem {
    display: grid;
    width: 4.5rem;
    height: 4.5rem;
    place-items: center;
    color: #db8888;
    border: 1px solid rgba(222, 129, 129, .28);
    border-radius: 1rem;
    background: rgba(137, 38, 38, .15);
}
.airport-lock-emblem svg { width: 2.3rem; height: 2.3rem; fill: none; stroke: currentColor; stroke-width: 1.4; transform: rotate(-15deg); }
.airport-unowned h2,
.airport-booking h2,
.airport-owner-heading h2 { font-weight: 800; }
.airport-unowned p { margin-bottom: 0; color: var(--mg-muted); }

.airport-buy-form {
    display: grid;
    gap: .3rem;
    padding: 1rem;
    text-align: center;
    border: 1px solid rgba(216, 170, 73, .25);
    border-radius: .9rem;
    background: rgba(216, 170, 73, .08);
}
.airport-buy-form > span { color: var(--mg-muted); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.airport-buy-form > strong { margin-bottom: .45rem; color: #f0ca7c; font-size: 1.75rem; }
.airport-buy-form .btn { min-height: 2.7rem; }
.airport-buy-form small { color: #e7adad; }

.airport-booking { padding: clamp(1.2rem, 3vw, 2.3rem); animation: airport-rise .65s .15s both; }
.airport-booking-heading,
.airport-owner-heading,
.airport-stats-heading { display: flex; gap: 1.25rem; align-items: flex-start; justify-content: space-between; }
.airport-booking-heading > div:first-child { max-width: 46rem; }
.airport-booking-heading p:not(.eyebrow) { margin-bottom: 0; color: var(--mg-muted); }

.airport-ticket-price {
    display: grid;
    min-width: 10rem;
    padding: .85rem 1rem;
    text-align: right;
    border-left: 1px solid rgba(212, 225, 239, .18);
}
.airport-ticket-price span,
.airport-ticket-price small { color: var(--mg-muted); font-size: .72rem; font-weight: 750; text-transform: uppercase; }
.airport-ticket-price strong { color: #f2ca79; font-size: 1.55rem; }

.airport-destination-form { margin-top: 1.6rem; }
.airport-destination-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}
.airport-destination-grid input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.airport-destination-grid label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .7rem;
    align-items: center;
    min-height: 4.5rem;
    padding: .75rem .9rem;
    cursor: pointer;
    color: #d9e2ec;
    border: 1px solid rgba(188, 207, 225, .15);
    border-radius: .8rem;
    background: linear-gradient(135deg, rgba(31, 45, 61, .75), rgba(11, 18, 28, .9));
    transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.airport-destination-grid label:hover { transform: translateY(-2px); border-color: rgba(216, 170, 73, .48); }
.airport-destination-grid input:checked + label { color: #ffdd93; border-color: rgba(231, 187, 91, .78); background: linear-gradient(135deg, rgba(129, 91, 30, .36), rgba(29, 33, 29, .92)); box-shadow: 0 .7rem 1.4rem rgba(0,0,0,.2), inset 0 0 0 1px rgba(255, 222, 150, .12); }
.airport-destination-grid input:focus-visible + label { outline: 3px solid rgba(226, 184, 95, .45); outline-offset: 2px; }
.airport-destination-grid label strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; }
.airport-destination-code { display: grid; width: 2.15rem; height: 2.15rem; place-items: center; color: #aebfd0; border-radius: .5rem; background: rgba(255,255,255,.06); font-size: .68rem; font-weight: 850; letter-spacing: .03em; }
.airport-destination-grid label svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.7; transition: transform .2s ease; }
.airport-destination-grid input:checked + label svg { transform: translateX(3px); }

.airport-departure-action { display: flex; gap: 1rem; align-items: center; justify-content: space-between; margin-top: 1.25rem; padding-top: 1.2rem; border-top: 1px solid rgba(192, 208, 225, .12); }
.airport-departure-action p { display: flex; gap: .55rem; align-items: center; margin: 0; color: var(--mg-muted); }
.airport-departure-action .airport-live-dot { flex: 0 0 auto; color: #79cf92; }
.airport-departure-action .btn { display: inline-flex; gap: .55rem; align-items: center; justify-content: center; min-width: 11rem; }
.airport-departure-action .btn svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.airport-travel-cooldown { display: grid; gap: .45rem; }
.airport-travel-cooldown > p { display: block; margin: 0; color: var(--mg-muted); font-size: .86rem; }
.airport-cooldown-countdown { width: fit-content; }

.airport-owner-dashboard { padding: clamp(1.2rem, 3vw, 2.3rem); animation: airport-rise .65s .22s both; }
.airport-owner-heading { align-items: center; margin-bottom: 1.3rem; }
.airport-owner-heading h2 { margin-bottom: 0; }
.airport-owner-heading > span,
.airport-stats-heading > span { color: var(--mg-muted); font-size: .84rem; }

.airport-owner-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.airport-control-card { position: relative; min-height: 16rem; padding: 1.25rem; overflow: hidden; border: 1px solid rgba(190, 209, 227, .14); border-radius: .95rem; background: linear-gradient(155deg, rgba(31, 43, 57, .72), rgba(12, 17, 26, .94)); }
.airport-control-card > svg { position: absolute; right: -1.1rem; top: -.8rem; width: 5.3rem; height: 5.3rem; fill: none; stroke: rgba(222, 235, 247, .07); stroke-width: 1.2; transform: rotate(-12deg); }
.airport-control-card h3 { position: relative; margin-bottom: .6rem; font-size: 1.42rem; font-weight: 800; }
.airport-control-card > p:not(.eyebrow) { position: relative; min-height: 3.8rem; color: var(--mg-muted); font-size: .88rem; }
.airport-control-card form { position: relative; }
.airport-control-card label { display: block; margin-bottom: .35rem; color: #c5d0db; font-size: .72rem; font-weight: 750; }
.airport-inline-field { display: flex; gap: .5rem; }
.airport-inline-field .form-control { min-width: 0; min-height: 2.7rem; }
.airport-inline-field .btn { flex: 0 0 auto; min-height: 2.7rem; }
.airport-control-price { border-top-color: rgba(217, 177, 91, .5); }
.airport-control-profit { border-top-color: rgba(99, 183, 130, .5); }
.airport-control-profit h3 { color: #8ee0a8; }
.airport-control-release { border-top-color: rgba(221, 113, 113, .48); }
.airport-control-release .btn { min-height: 2.7rem; }

.airport-stats { margin-top: 1.3rem; padding-top: 1.35rem; border-top: 1px solid rgba(194, 210, 226, .13); }
.airport-stats-heading { align-items: end; }
.airport-stats-heading h3 { margin: 0; font-weight: 800; }
.airport-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; }
.airport-stat-grid > div { display: grid; gap: .35rem; padding: 1rem; border-radius: .75rem; background: rgba(255,255,255,.035); }
.airport-stat-grid span { color: var(--mg-muted); font-size: .72rem; font-weight: 750; text-transform: uppercase; }
.airport-stat-grid strong { color: #eef5fc; font-size: 1.45rem; }
.airport-destination-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin-top: 1.1rem; }
.airport-destination-stats h4,
.airport-destination-stats > p { grid-column: 1 / -1; margin: 0 0 .1rem; }
.airport-destination-stats h4 { font-size: .95rem; font-weight: 750; }
.airport-destination-stats > p { color: var(--mg-muted); }
.airport-destination-stats > div { display: grid; grid-template-columns: 1fr auto; gap: .22rem .5rem; padding: .8rem .9rem; border-left: 2px solid rgba(216, 170, 73, .65); border-radius: 0 .55rem .55rem 0; background: rgba(255,255,255,.035); }
.airport-destination-stats > div span { font-weight: 700; }
.airport-destination-stats > div strong { color: #edc676; font-size: .82rem; }
.airport-destination-stats > div small { grid-column: 1 / -1; color: var(--mg-muted); }

.airport-flight-screen {
    position: relative;
    min-height: min(41rem, calc(100vh - 10rem));
    padding: clamp(1.5rem, 5vw, 4rem);
    overflow: hidden;
    color: #f2f7fc;
    border: 1px solid rgba(193, 213, 235, .19);
    border-radius: 1.4rem;
    background:
        linear-gradient(90deg, rgba(3, 8, 15, .86), rgba(3, 10, 19, .34) 60%, rgba(3, 9, 18, .69)),
        linear-gradient(0deg, rgba(4, 9, 17, .84), rgba(7, 25, 47, .12)),
        url("../assets/images/airport-terminal.png") center / cover no-repeat;
    box-shadow: 0 1.7rem 4rem rgba(0, 0, 0, .48);
    isolation: isolate;
}
.airport-flight-screen::before { position: absolute; z-index: -1; inset: 0; content: ""; background: radial-gradient(ellipse at 30% 70%, rgba(62, 137, 188, .25), transparent 34%), linear-gradient(130deg, transparent 30%, rgba(255,255,255,.04), transparent 32%); animation: airport-cabin-shift 8s ease-in-out infinite alternate; }
.airport-flight-stars { position: absolute; z-index: -1; inset: 0; opacity: .42; background-image: radial-gradient(circle, rgba(247, 225, 170, .9) 0 1px, transparent 1.5px); background-size: 91px 93px; mask-image: linear-gradient(90deg, transparent, #000 24%, #000 78%, transparent); animation: airport-stars 19s linear infinite; }
.airport-flight-copy { max-width: 37rem; animation: airport-rise .6s both; }
.airport-flight-copy h1 { margin-bottom: .8rem; font-size: clamp(2rem, 5vw, 4rem); font-weight: 850; letter-spacing: -.045em; }
.airport-flight-copy p:not(.eyebrow) { color: rgba(235,243,251,.82); font-size: 1.05rem; }

.airport-flight-plane { position: absolute; left: -18rem; top: 46%; width: 17rem; height: 7rem; animation: airport-fly-across 10s cubic-bezier(.36,.04,.66,.99) infinite; }
.airport-plane-trail { position: absolute; right: 66%; top: 50%; width: 17rem; height: 2px; opacity: .65; background: linear-gradient(90deg, transparent, rgba(223, 239, 255, .8), transparent); box-shadow: 0 0 .8rem rgba(191,220,255,.65); }
.airport-plane-body { position: absolute; right: 0; top: 0; display: grid; width: 12rem; height: 5.2rem; place-items: center; border: 1px solid rgba(238, 246, 253, .54); border-radius: 65% 21% 28% 59%; background: linear-gradient(155deg, #edf1ef 0 15%, #abb8c3 56%, #546779 100%); box-shadow: .3rem .9rem 1.7rem rgba(0,0,0,.35), inset .2rem .2rem .5rem rgba(255,255,255,.5); transform: rotate(-9deg); }
.airport-plane-body::after { position: absolute; left: -1.6rem; bottom: -.95rem; width: 6rem; height: 1.15rem; content: ""; border-radius: 100% 0 0 100%; background: linear-gradient(90deg, #8495a2, #e5e9e9); transform: rotate(-19deg); transform-origin: right; }
.airport-plane-body > svg { width: 9.5rem; height: 6.6rem; margin-left: 1rem; color: #344756; fill: none; stroke: currentColor; stroke-width: 1.05; transform: rotate(-7deg); }
.airport-plane-window { position: absolute; right: 1.8rem; top: 1.33rem; display: grid; width: 1.55rem; height: 1.55rem; overflow: hidden; place-items: center; border: .16rem solid #263643; border-radius: 50%; background: #0b2130; }
.airport-plane-window img { width: 180%; max-width: none; height: 180%; object-fit: cover; object-position: center top; }

.airport-flight-ticket { position: absolute; right: clamp(1.5rem, 5vw, 4rem); bottom: clamp(1.5rem, 5vw, 3.5rem); display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; width: min(100% - 3rem, 31rem); padding: 1.1rem 1.2rem; border: 1px solid rgba(228, 215, 173, .36); border-radius: .9rem; background: rgba(8, 15, 25, .72); box-shadow: 0 1rem 2.4rem rgba(0,0,0,.35); backdrop-filter: blur(14px); animation: airport-rise .65s .25s both; }
.airport-flight-ticket > div:not(.airport-flight-countdown) { display: grid; gap: .15rem; }
.airport-flight-ticket span { color: rgba(221, 232, 241, .58); font-size: .62rem; font-weight: 850; letter-spacing: .1em; }
.airport-flight-ticket strong { font-size: 1.04rem; }
.airport-flight-ticket > svg { width: 1.6rem; height: 1.6rem; color: #edc77d; fill: none; stroke: currentColor; stroke-width: 1.6; }
.airport-flight-ticket > div:nth-of-type(2) { text-align: right; }
.airport-flight-countdown { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; padding-top: .65rem; border-top: 1px dashed rgba(232, 223, 192, .27); }
.airport-flight-countdown strong { color: #ffe2a1; font-size: 1.7rem; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.airport-flight-status { position: absolute; left: clamp(1.5rem, 5vw, 4rem); bottom: clamp(1.5rem, 5vw, 3.5rem); max-width: 22rem; margin: 0; color: rgba(228,238,247,.68); font-size: .82rem; }

@keyframes airport-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes airport-slow-pan { from { transform: scale(1.02) translateX(-.8%); } to { transform: scale(1.08) translateX(.8%); } }
@keyframes airport-light-scan { from { background-position: 0 0; } to { background-position: 170px 0; } }
@keyframes airport-pulse { 0%,100% { opacity: .75; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes airport-cabin-shift { from { opacity: .45; transform: translateX(-2%); } to { opacity: .86; transform: translateX(2%); } }
@keyframes airport-stars { from { transform: translateX(0); } to { transform: translateX(-91px); } }
@keyframes airport-fly-across { 0% { transform: translate(-2rem, 2.5rem) scale(.75); opacity: 0; } 10% { opacity: 1; } 56% { transform: translate(58vw, -2rem) scale(1); opacity: 1; } 82% { opacity: 1; } 100% { transform: translate(106vw, -7rem) scale(.6); opacity: 0; } }

@media (max-width: 991.98px) {
    .airport-hero { grid-template-columns: 1fr; min-height: 22rem; }
    .airport-status-card { max-width: 23rem; }
    .airport-unowned { grid-template-columns: auto minmax(0, 1fr); }
    .airport-buy-form { grid-column: 1 / -1; grid-template-columns: 1fr auto auto; align-items: center; text-align: left; }
    .airport-buy-form > strong { margin: 0; }
    .airport-buy-form small { grid-column: 1 / -1; }
    .airport-destination-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .airport-owner-grid { grid-template-columns: 1fr 1fr; }
    .airport-control-release { grid-column: 1 / -1; min-height: auto; }
    .airport-flight-screen { min-height: 38rem; }
    .airport-flight-status { display: none; }
}

@media (max-width: 639.98px) {
    .airport-hero { min-height: 24rem; padding: 1.35rem; }
    .airport-hero-backdrop { background-position: 61% center; }
    .airport-unowned { grid-template-columns: 1fr; }
    .airport-lock-emblem { width: 3.6rem; height: 3.6rem; }
    .airport-buy-form { grid-template-columns: 1fr; text-align: center; }
    .airport-ticket-price { width: 100%; padding: .7rem 0 0; text-align: left; border-top: 1px solid rgba(212,225,239,.18); border-left: 0; }
    .airport-booking-heading,
    .airport-owner-heading,
    .airport-stats-heading { display: grid; }
    .airport-destination-grid,
    .airport-owner-grid,
    .airport-stat-grid,
    .airport-destination-stats { grid-template-columns: 1fr; }
    .airport-control-release { grid-column: auto; }
    .airport-departure-action { display: grid; }
    .airport-departure-action .btn { width: 100%; }
    .airport-flight-screen { min-height: calc(100vh - 8rem); padding: 1.35rem; }
    .airport-flight-plane { top: 46%; }
    .airport-flight-ticket { right: 1.35rem; bottom: 1.35rem; width: calc(100% - 2.7rem); }
    .airport-flight-copy h1 { max-width: 15rem; }
}

/* Garaj */
.garage-page main { background: radial-gradient(circle at 9% 12%, rgba(241, 175, 62, .13), transparent 24rem), radial-gradient(circle at 88% 35%, rgba(56, 126, 159, .13), transparent 30rem); }
.garage-hero { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.25rem; overflow: hidden; margin-bottom: 1.3rem; padding: clamp(1.35rem, 3.4vw, 2.45rem); background: linear-gradient(115deg, rgba(47, 36, 18, .97), rgba(16, 22, 30, .96) 55%, rgba(15, 50, 65, .92)); border: 1px solid rgba(236, 181, 74, .3); border-radius: 1rem; box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .4); animation: panel-arrive .6s cubic-bezier(.2, .8, .2, 1) both; }
.garage-hero::after { position: absolute; top: -9rem; right: 18%; width: 20rem; height: 20rem; pointer-events: none; content: ""; background: rgba(236, 181, 74, .11); border-radius: 50%; filter: blur(3rem); animation: ambient-pulse 6s ease-in-out infinite; }
.garage-hero > * { position: relative; z-index: 1; }
.garage-hero-icon { display: grid; width: clamp(3.8rem, 8vw, 5rem); height: clamp(3.8rem, 8vw, 5rem); place-items: center; color: #2b1c05; background: linear-gradient(145deg, #ffe39a, #d99c32); border: 2px solid rgba(255, 242, 190, .34); border-radius: .85rem; box-shadow: 0 0 2rem rgba(231, 171, 57, .2); transform: rotate(-4deg); }
.garage-hero-icon svg { width: 2.35rem; height: 2.35rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.65; }
.garage-hero h1 { margin-bottom: .4rem; font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 850; }
.garage-hero p:last-child { max-width: 47rem; margin: 0; color: var(--mg-muted); }
.garage-overview { display: grid; grid-template-columns: auto auto; gap: .15rem .85rem; min-width: 12rem; padding: .8rem 1rem; text-align: right; background: rgba(5, 9, 15, .48); border: 1px solid rgba(255, 255, 255, .13); border-radius: .8rem; }
.garage-overview span { color: var(--mg-muted); font-size: .67rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.garage-overview strong, .garage-overview b { color: #ffe1a7; font-size: 1.05rem; }
.garage-selection-bar { position: sticky; z-index: 4; top: .45rem; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; margin-bottom: 1rem; padding: .85rem 1rem; background: rgba(12, 17, 25, .94); border: 1px solid rgba(255, 255, 255, .11); border-radius: .8rem; box-shadow: 0 .7rem 1.8rem rgba(0, 0, 0, .24); backdrop-filter: blur(12px); }
.garage-check-all, .garage-select { display: inline-flex; align-items: center; gap: .48rem; color: #e9eef0; font-size: .87rem; font-weight: 800; cursor: pointer; }
.garage-check-all input, .garage-select input { width: 1.12rem; height: 1.12rem; accent-color: #e4ae42; cursor: pointer; }
.garage-selection-bar [data-garage-count] { color: var(--mg-muted); font-size: .85rem; }.garage-selection-bar .btn { margin-left: auto; font-weight: 850; }.garage-selection-bar .btn svg { width: 1.1rem; height: 1.1rem; margin-right: .3rem; vertical-align: -.16rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.65; }
.garage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.garage-card { position: relative; display: grid; grid-template-columns: minmax(10rem, .85fr) minmax(0, 1fr); gap: 1rem; overflow: hidden; min-height: 13rem; padding: 1rem; background: linear-gradient(135deg, rgba(21, 28, 38, .97), rgba(12, 16, 24, .98)); border: 1px solid rgba(255, 255, 255, .1); border-radius: .95rem; box-shadow: 0 .9rem 2rem rgba(0, 0, 0, .2); animation: stat-rise .55s cubic-bezier(.2, .8, .2, 1) both; }
.garage-card::after { position: absolute; right: -5rem; bottom: -5rem; width: 13rem; height: 13rem; pointer-events: none; content: ""; background: rgba(229, 172, 59, .11); border-radius: 50%; filter: blur(1.2rem); }
.garage-card:has(.garage-select input:checked) { border-color: rgba(255, 210, 115, .72); box-shadow: 0 0 0 2px rgba(232, 177, 63, .12), 0 1.1rem 2.5rem rgba(0, 0, 0, .25); }.garage-card:nth-child(2n) { animation-delay: .06s; }
.garage-select { position: absolute; z-index: 3; top: .75rem; left: .75rem; padding: .32rem .5rem; background: rgba(5, 8, 12, .72); border: 1px solid rgba(255, 255, 255, .13); border-radius: 99rem; }
.garage-car-link { position: relative; z-index: 1; display: grid; min-height: 10.5rem; place-items: center; overflow: hidden; background: linear-gradient(145deg, #1d3440, #090d13); border: 1px solid rgba(255, 255, 255, .12); border-radius: .7rem; }.garage-car-link::after { position: absolute; right: 0; bottom: 19%; left: 0; height: .13rem; pointer-events: none; content: ""; background: rgba(255, 221, 139, .5); box-shadow: 0 1.5rem 0 rgba(255, 255, 255, .09); }
.garage-car-link img { position: relative; z-index: 1; width: 94%; height: 10.5rem; object-fit: contain; filter: drop-shadow(0 1rem .55rem rgba(0, 0, 0, .55)); transition: transform .35s ease; }.garage-card:hover .garage-car-link img, .garage-card:focus-within .garage-car-link img { transform: translateX(.25rem) scale(1.035); }
.garage-card-copy { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; }.garage-card-copy a { color: inherit; text-decoration: none; }.garage-card h2 { margin-bottom: .65rem; font-size: clamp(1.1rem, 2.2vw, 1.35rem); font-weight: 850; }.garage-card-copy > a:first-child:hover h2 { color: #ffe1a2; }
.garage-card-values { display: grid; gap: .45rem; }.garage-card-values span { display: flex; justify-content: space-between; gap: .6rem; color: var(--mg-muted); font-size: .85rem; }.garage-card-values b { color: #dff6ed; }.garage-detail-link { display: inline-block; width: fit-content; margin-top: .8rem; color: #ffe1a2 !important; font-size: .84rem; font-weight: 850; }.garage-detail-link span { display: inline-block; margin-left: .2rem; transition: transform .2s ease; }.garage-detail-link:hover span { transform: translateX(.2rem); }
.garage-empty { display: grid; justify-items: center; padding: clamp(2rem, 8vw, 4rem) 1.5rem; text-align: center; background: rgba(12, 17, 25, .94); border: 1px dashed rgba(255, 220, 129, .3); border-radius: 1rem; }.garage-empty svg { width: 3.5rem; height: 3.5rem; margin-bottom: .9rem; color: #ffd36e; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.45; animation: garage-empty-car 2.4s ease-in-out infinite; }.garage-empty h2 { font-weight: 850; }.garage-empty p { color: var(--mg-muted); }

.garage-service-scene { position: relative; display: grid; min-height: clamp(20rem, 42vw, 30rem); place-items: end center; overflow: hidden; isolation: isolate; margin-bottom: 1.1rem; background: linear-gradient(180deg, rgba(7, 11, 16, .05), rgba(4, 7, 10, .9)), repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 5rem), linear-gradient(145deg, #35434d, #10151b 55%, #05070a); border: 1px solid rgba(255, 255, 255, .12); border-radius: 1rem; box-shadow: 0 1.3rem 3rem rgba(0, 0, 0, .28); }
.garage-service-scene::before { position: absolute; z-index: -1; top: 13%; right: 0; left: 0; height: .18rem; content: ""; background: linear-gradient(90deg, transparent, rgba(255, 234, 161, .88), transparent); box-shadow: 0 4.8rem 1rem rgba(255, 238, 178, .25), 0 9.6rem 1rem rgba(255, 238, 178, .16); }.service-sign { position: absolute; z-index: 3; top: 1rem; left: 1rem; padding: .38rem .62rem; color: #fce6ae; font-size: .72rem; font-weight: 900; letter-spacing: .12em; background: rgba(5, 7, 10, .7); border: 1px solid rgba(255, 231, 171, .3); border-radius: .35rem; }
.garage-service-scene > img { position: relative; z-index: 1; width: min(81%, 43rem); max-height: 24rem; margin: 3rem .5rem -.1rem 0; object-fit: contain; filter: drop-shadow(0 1.2rem .75rem rgba(0, 0, 0, .55)); animation: garage-service-car .9s cubic-bezier(.16, 1, .3, 1) both; }.service-lamp { position: absolute; z-index: 2; top: 2.3rem; width: .38rem; height: 13rem; background: linear-gradient(#c5dbe1, #151b20); border-radius: 1rem; box-shadow: 0 0 .8rem rgba(215, 249, 255, .8), 0 1rem .5rem rgba(0, 0, 0, .45); animation: service-lamp-pulse 2.2s ease-in-out infinite; }.service-lamp-left { left: 15%; }.service-lamp-right { right: 15%; animation-delay: -1.1s; }.service-lift { position: absolute; z-index: 0; right: 11%; bottom: 12%; left: 11%; height: .5rem; background: linear-gradient(90deg, #525b63, #bec5c9, #505861); box-shadow: 0 1.3rem 0 #242a2e, 0 2.55rem 0 #161b1e; }
.service-spark { position: absolute; z-index: 4; color: #ffe788; font-size: 1.7rem; opacity: 0; text-shadow: 0 0 1rem rgba(255, 222, 111, .92); animation: garage-spark 1.7s ease-in-out infinite; }.spark-one { right: 25%; bottom: 37%; }.spark-two { right: 36%; bottom: 28%; animation-delay: -.85s; }.service-copy { position: absolute; z-index: 4; top: 3.5rem; right: 1.25rem; max-width: min(44%, 25rem); padding: .9rem 1rem; background: rgba(5, 8, 12, .67); border: 1px solid rgba(255, 255, 255, .12); border-radius: .7rem; backdrop-filter: blur(8px); }.service-copy h2 { margin-bottom: .35rem; font-size: clamp(1.15rem, 2.5vw, 1.55rem); font-weight: 850; }.service-copy p:last-child { margin-bottom: 0; color: #cfdbdf; }.garage-service-scene.is-repaired { border-color: rgba(91, 220, 152, .42); }.garage-service-scene.is-repaired .service-spark { color: #a9ffd1; animation-duration: 2.2s; }
.garage-detail-grid { display: grid; grid-template-columns: minmax(14rem, .8fr) minmax(0, 1.2fr); gap: 1rem; }.garage-detail-stats { display: grid; align-content: start; gap: .65rem; }.garage-detail-stats > div { padding: .8rem; background: rgba(255, 255, 255, .045); border-radius: .65rem; }.garage-detail-stats span { display: block; color: var(--mg-muted); font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }.garage-detail-stats strong { display: block; margin-top: .2rem; color: #d9fae6; font-size: 1.15rem; }.garage-actions h2 { margin-bottom: .4rem; font-size: 1.4rem; font-weight: 850; }.garage-actions p:not(.eyebrow) { color: var(--mg-muted); }.garage-actions hr { margin: 1.25rem 0; border-color: rgba(255, 255, 255, .11); }.garage-actions .btn { font-weight: 850; }
.garage-vehicle-showcase { position: relative; display: grid; min-height: clamp(17rem, 34vw, 25rem); place-items: center; overflow: hidden; isolation: isolate; margin-bottom: 1.1rem; padding: 1.4rem; background: linear-gradient(135deg, rgba(29, 57, 71, .95), rgba(8, 12, 18, .98) 62%), repeating-linear-gradient(90deg, transparent 0 4rem, rgba(255, 255, 255, .035) 4rem 4.1rem); border: 1px solid rgba(255, 255, 255, .13); border-radius: 1rem; box-shadow: 0 1.3rem 3rem rgba(0, 0, 0, .28); }.garage-vehicle-showcase::before { position: absolute; z-index: -1; right: -7rem; bottom: -10rem; width: 26rem; height: 26rem; content: ""; background: rgba(231, 173, 60, .17); border-radius: 50%; filter: blur(2.2rem); animation: ambient-pulse 5.5s ease-in-out infinite; }.garage-vehicle-showcase::after { position: absolute; z-index: -1; right: 0; bottom: 17%; left: 0; height: .16rem; content: ""; background: linear-gradient(90deg, transparent, rgba(255, 227, 159, .7), transparent); box-shadow: 0 2.3rem 0 rgba(255, 255, 255, .07); }.garage-vehicle-showcase img { position: relative; z-index: 1; width: min(83%, 51rem); height: clamp(13rem, 28vw, 21rem); object-fit: contain; filter: drop-shadow(0 1.45rem .85rem rgba(0, 0, 0, .58)); animation: garage-service-car .8s cubic-bezier(.16, 1, .3, 1) both; }.garage-vehicle-showcase > div { position: absolute; z-index: 2; right: 1rem; bottom: 1rem; display: grid; gap: .15rem; padding: .6rem .78rem; background: rgba(5, 8, 12, .73); border: 1px solid rgba(255, 255, 255, .13); border-radius: .55rem; backdrop-filter: blur(7px); }.garage-vehicle-showcase span { color: #b9c5cc; font-size: .62rem; font-weight: 900; letter-spacing: .1em; }.garage-vehicle-showcase strong { color: #ffe1a4; font-size: .84rem; }.garage-repair-confirm { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: clamp(1rem, 3vw, 1.4rem); }.garage-repair-confirm h2 { margin-bottom: .35rem; color: #ffe0a4; font-size: clamp(1.15rem, 2.8vw, 1.5rem); font-weight: 900; }.garage-repair-confirm p:not(.eyebrow) { max-width: 46rem; margin-bottom: 0; color: var(--mg-muted); }.garage-repair-confirm .btn { font-weight: 850; white-space: nowrap; }

.garage-hero-sale .btn { justify-self: end; }.garage-mafia-scene { position: relative; display: grid; min-height: clamp(22rem, 43vw, 31rem); place-items: center; overflow: hidden; isolation: isolate; margin-bottom: 1.15rem; background: linear-gradient(150deg, rgba(15, 20, 25, .48), rgba(3, 5, 8, .96)), linear-gradient(90deg, #19252c 0 33%, #0c1015 33% 68%, #25241e 68%); border: 1px solid rgba(226, 86, 76, .36); border-radius: 1rem; box-shadow: 0 1.3rem 3rem rgba(0, 0, 0, .3); }.garage-mafia-scene::before { position: absolute; inset: 0; z-index: -1; content: ""; background: repeating-linear-gradient(90deg, transparent 0 4rem, rgba(255, 255, 255, .035) 4rem 4.1rem, transparent 4.1rem 8rem); }.garage-mafia-scene::after { position: absolute; z-index: 4; right: 1rem; bottom: 1rem; padding: .26rem .5rem; color: #f3f5f7; font-size: .61rem; font-weight: 900; letter-spacing: .09em; content: "MAFIA LOCALĂ · ROMÂNIA"; background: linear-gradient(90deg, #174d9e 0 33%, #e1b62c 33% 66%, #a92d36 66%); border-radius: .25rem; box-shadow: 0 .3rem .8rem rgba(0, 0, 0, .35); }
.mafia-lights i { position: absolute; z-index: 0; top: -5rem; width: 8rem; height: 34rem; opacity: .38; filter: blur(.2rem); transform-origin: top center; }.mafia-lights i:nth-child(1) { left: 16%; background: linear-gradient(180deg, rgba(208, 55, 53, .9), transparent); transform: rotate(22deg); animation: mafia-light-scan 4s ease-in-out infinite; }.mafia-lights i:nth-child(2) { right: 16%; background: linear-gradient(180deg, rgba(69, 145, 213, .85), transparent); transform: rotate(-22deg); animation: mafia-light-scan 4s ease-in-out -2s infinite reverse; }.mafia-lights i:nth-child(3) { left: 47%; width: 5rem; background: linear-gradient(180deg, rgba(255, 229, 159, .55), transparent); animation: mafia-light-scan 3.2s ease-in-out -1s infinite; }
.mafia-silhouette { position: absolute; z-index: 1; bottom: 0; width: clamp(4rem, 11vw, 8rem); height: 58%; opacity: .82; background: linear-gradient(90deg, transparent 40%, rgba(1, 2, 3, .95) 41% 61%, transparent 62%); clip-path: polygon(38% 100%, 34% 51%, 42% 31%, 40% 12%, 50% 2%, 60% 12%, 58% 31%, 66% 51%, 62% 100%); filter: drop-shadow(0 0 1rem rgba(0, 0, 0, .85)); }.mafia-left { left: 12%; transform: scaleX(-1); }.mafia-right { right: 12%; }
.mafia-offer-card { position: relative; z-index: 3; width: min(88%, 41rem); padding: clamp(1.25rem, 4vw, 2.5rem); text-align: center; background: rgba(8, 11, 16, .82); border: 1px solid rgba(255, 225, 169, .26); border-radius: .9rem; box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .42); backdrop-filter: blur(12px); animation: mafia-offer-arrive .8s cubic-bezier(.16, 1, .3, 1) both; }.mafia-offer-card h2 { margin-bottom: .8rem; color: #ffe2a8; font-size: clamp(1.45rem, 4vw, 2.3rem); font-weight: 900; }.mafia-offer-card > p:not(.eyebrow) { max-width: 35rem; margin: .8rem auto 1.1rem; color: #d2dce0; }.mafia-offer-card .btn { font-weight: 900; }.mafia-status { color: #ffd4cc !important; font-weight: 800; }.garage-mafia-scene.is-closed { filter: saturate(.65); }
.garage-offer-list { margin-top: 1.3rem; }.garage-offer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.garage-offer-item { grid-template-columns: 1fr; min-height: auto; }.garage-offer-item > img { position: relative; z-index: 1; width: 100%; height: 10rem; object-fit: contain; background: rgba(4, 7, 11, .35); border: 1px solid rgba(255, 255, 255, .1); border-radius: .65rem; }.garage-offer-item h3 { font-size: 1rem; font-weight: 850; }.garage-offer-item p { margin-bottom: .25rem; color: var(--mg-muted); }.garage-offer-item strong { color: #ffe0a4; }

@keyframes garage-empty-car { 0%, 100% { transform: translateX(-.2rem) rotate(-3deg); } 50% { transform: translateX(.25rem) rotate(3deg); } }
@keyframes garage-service-car { from { opacity: 0; transform: translateX(3rem) scale(.93); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes service-lamp-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes garage-spark { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 42% { opacity: 1; transform: scale(1.2) rotate(32deg); } 64% { opacity: .3; transform: scale(.75) rotate(52deg); } }
@keyframes mafia-light-scan { 0%, 100% { opacity: .18; transform: rotate(22deg) translateX(-1rem); } 50% { opacity: .55; transform: rotate(8deg) translateX(1rem); } }
@keyframes mafia-offer-arrive { from { opacity: 0; transform: translateY(1.3rem) scale(.95); } 65% { opacity: 1; transform: translateY(-.14rem) scale(1.01); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 991.98px) { .garage-hero { grid-template-columns: auto minmax(0, 1fr); }.garage-overview, .garage-hero-sale .btn { grid-column: 1 / -1; justify-self: stretch; text-align: left; }.garage-overview { grid-template-columns: auto 1fr; }.garage-detail-grid { grid-template-columns: 1fr; }.garage-repair-confirm { align-items: flex-start; flex-direction: column; }.garage-offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639.98px) { .garage-hero { grid-template-columns: 1fr; }.garage-hero-icon { display: none; }.garage-selection-bar { align-items: stretch; }.garage-selection-bar .btn, .garage-repair-confirm .btn { width: 100%; margin-left: 0; white-space: normal; }.garage-grid, .garage-offer-grid { grid-template-columns: 1fr; }.garage-card { grid-template-columns: 1fr; }.garage-car-link, .garage-car-link img { min-height: 12rem; height: 12rem; }.service-copy { top: 3.5rem; right: .75rem; left: .75rem; max-width: none; }.service-lamp { height: 10rem; }.service-lamp-left { left: 8%; }.service-lamp-right { right: 8%; }.garage-service-scene > img, .garage-vehicle-showcase img { width: 94%; }.garage-vehicle-showcase > div { right: .75rem; bottom: .75rem; }.mafia-silhouette { width: 4.2rem; }.mafia-left { left: 3%; }.mafia-right { right: 3%; } }
/* Cazinou · ruletă europeană */
.roulette-page { background: radial-gradient(circle at 50% -15%, #4b1731 0, #15101a 36%, #090b10 76%); }
.roulette-shell { max-width: 1320px; }
.roulette-hero, .roulette-unowned, .roulette-owner-panel, .roulette-game { border: 1px solid rgba(235, 189, 92, .23); border-radius: 22px; background: linear-gradient(145deg, rgba(34, 20, 33, .96), rgba(13, 18, 25, .97)); box-shadow: 0 24px 72px rgba(0, 0, 0, .34); }
.roulette-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 205px; padding: 36px; display: flex; gap: 28px; align-items: center; justify-content: space-between; }
.roulette-hero-lights { position: absolute; z-index: -1; inset: 0; opacity: .75; background: radial-gradient(circle at 8% 20%, rgba(255, 207, 98, .45) 0 2px, transparent 3px) 0 0 / 45px 45px, radial-gradient(ellipse at 25% -40%, rgba(146, 22, 65, .64), transparent 62%), radial-gradient(ellipse at 110% 110%, rgba(212, 170, 58, .18), transparent 54%); mask-image: linear-gradient(90deg, black, transparent 75%); }
.roulette-hero h1 { margin: 2px 0 9px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2rem, 5vw, 3.7rem); letter-spacing: -.045em; color: #ffe4a2; }
.roulette-hero p { margin: 0; max-width: 700px; color: #cbbfca; }
.roulette-door-status { min-width: 170px; display: flex; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid rgba(255,255,255,.13); border-radius: 14px; background: rgba(5, 9, 14, .48); }
.roulette-door-status span:not(.roulette-status-dot):not(.roulette-status-mark), .roulette-door-status div span { display: block; color: #a99da8; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }.roulette-door-status strong { color: #fff3d3; }.roulette-status-dot { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: #c4434d; box-shadow: 0 0 0 4px rgba(196,67,77,.13), 0 0 15px rgba(196,67,77,.75); }.is-open .roulette-status-dot { background: #59d99b; box-shadow: 0 0 0 4px rgba(89,217,155,.12), 0 0 15px rgba(89,217,155,.75); }.roulette-status-mark { margin-left: auto; color: #edbf5a; font: 700 1.6rem Georgia, serif; }
.roulette-unowned { margin-top: 24px; padding: 34px; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(200px, 250px); align-items: center; gap: 25px; }.roulette-unowned h2, .roulette-owner-panel h2, .roulette-game h2 { margin: 0 0 8px; color: #fff2d4; font: 700 clamp(1.45rem, 3vw, 2rem) Georgia, serif; }.roulette-unowned p { margin: 0; color: #c6bac3; }.roulette-unowned-emblem { display: grid; place-items: center; width: 70px; height: 70px; border: 2px solid #e6b650; border-radius: 50%; color: #ffe5a6; font: 700 2.5rem Georgia, serif; box-shadow: inset 0 0 0 8px #53233e, 0 0 30px rgba(223,164,61,.22); }.roulette-buy-form { display: grid; gap: 3px; text-align: right; }.roulette-buy-form span, .roulette-locked-note span { color: #ada1ab; font-size: .84rem; }.roulette-buy-form strong { color: #ffdb8c; font-size: 1.55rem; }.roulette-buy-form .btn { margin-top: 9px; }.roulette-locked-note { display: grid; gap: 5px; padding: 15px; border-radius: 12px; background: rgba(245,184,77,.1); color: #ffdc91; }
.roulette-owner-panel, .roulette-game { margin-top: 24px; padding: 29px; }.roulette-owner-heading, .roulette-game-topline { display: flex; align-items: center; justify-content: space-between; gap: 18px; }.roulette-owner-heading > span { color: #b7abb4; }.roulette-owner-heading > span strong { color: #f8d589; }.roulette-owner-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin: 24px 0; }.roulette-owner-metrics article { padding: 20px; border: 1px solid rgba(255,255,255,.1); border-radius: 15px; background: linear-gradient(140deg, rgba(255,255,255,.07), transparent); }.roulette-owner-metrics span, .roulette-owner-metrics small { display: block; color: #b8abb3; }.roulette-owner-metrics strong { display: block; margin: 5px 0; color: #ffda8f; font-size: 1.65rem; }.roulette-owner-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }.roulette-owner-actions article { padding: 20px; border-radius: 15px; background: rgba(8, 13, 20, .6); border: 1px solid rgba(255,255,255,.08); }.roulette-owner-actions h3 { font-size: 1.08rem; color: #f9e1ad; }.roulette-owner-actions p { min-height: 51px; color: #bdb2bb; font-size: .9rem; }.roulette-money-form label { display: block; margin-bottom: 5px; color: #bdb2bb; font-size: .78rem; }.roulette-money-form > div { display: flex; gap: 7px; }.roulette-money-form input { min-width: 0; }.roulette-danger-zone { border-color: rgba(216, 93, 88, .26) !important; }.roulette-ledger { margin-top: 23px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); }.roulette-ledger h3 { color: #e8dddf; font-size: 1rem; }.roulette-ledger ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 20px; }.roulette-ledger li { display: flex; justify-content: space-between; gap: 8px; color: #bfb6bd; font-size: .88rem; }.roulette-ledger .positive { color: #7ee1aa; }.roulette-ledger .negative { color: #f58a84; }
.roulette-phase { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-radius: 12px; border: 1px solid rgba(229, 181, 73, .2); background: rgba(0,0,0,.25); }.roulette-phase strong { color: #e9dac4; font-size: .86rem; }.roulette-phase b { min-width: 43px; color: #f5c662; font-variant-numeric: tabular-nums; font-size: 1.1rem; }.roulette-game-layout { display: grid; grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr); gap: 24px; margin-top: 22px; }.roulette-wheel-panel { display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; padding: 20px; border: 1px solid rgba(230, 183, 75, .24); border-radius: 19px; background: radial-gradient(circle, #452b22 0 26%, #131215 57%, #090b0e 73%); }
.roulette-wheel-stage { position: relative; width: min(100%, 350px); aspect-ratio: 1; padding: 17px; filter: drop-shadow(0 17px 20px rgba(0,0,0,.6)); }.roulette-wheel-stage::before { content: ''; position: absolute; inset: 1px; border-radius: 50%; border: 4px solid #c7953b; background: repeating-conic-gradient(#e7bd67 0deg 1.5deg, #6c421d 1.5deg 4deg); }.roulette-wheel { position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: repeating-conic-gradient(from -4.86deg, #d1a347 0deg 1deg, #653c1d 1deg 4.86deg, #8f6128 4.86deg 9.72deg); border: 10px solid #5f3418; box-shadow: inset 0 0 0 9px #d6aa51, inset 0 0 30px #100b07; transition: transform 9.3s cubic-bezier(.11,.61,.13,1); }.roulette-wheel::after { content: ''; position: absolute; inset: 20%; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #f6cd78, #825022 40%, #351c0f 70%); border: 7px solid #c28e3e; box-shadow: inset 0 0 16px #1e0d07; }.roulette-wheel-pocket { position: absolute; left: 50%; top: 50%; width: 25px; height: 46%; transform-origin: 50% 0; transform: rotate(calc(var(--p) * 360deg / var(--count))) translateX(-50%); z-index: 1; display: block; }.roulette-wheel-pocket i { position: absolute; top: 3px; left: 50%; width: 22px; height: 27px; transform: translateX(-50%); border-radius: 10px 10px 4px 4px; display: grid; place-items: center; color: #fff; font: 700 10px Arial, sans-serif; font-style: normal; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }.roulette-wheel-pocket.roulette-red i { background: #aa2431; }.roulette-wheel-pocket.roulette-black i { background: #182127; }.roulette-wheel-pocket.roulette-green i { background: #177a50; }.roulette-wheel-hub { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; color: #ffe0a0; border: 2px solid #e8bf67; background: #3f2213; box-shadow: 0 0 0 5px #70441f; font: 700 1.4rem Georgia, serif; }.roulette-ball { position: absolute; z-index: 4; width: 14px; height: 14px; left: 49%; top: 8%; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #fff, #ded8c5 45%, #746f68 100%); box-shadow: 0 1px 5px #000; transition: transform 9.3s cubic-bezier(.15,.72,.1,1); }.roulette-result-screen { width: 100%; margin-top: 17px; padding: 12px; text-align: center; border-radius: 10px; background: #090c11; border: 1px solid rgba(247,210,121,.25); }.roulette-result-screen span, .roulette-result-screen small { display: block; color: #a79ba4; font-size: .68rem; letter-spacing: .1em; }.roulette-result-screen strong { display: block; min-height: 42px; color: #f5cf73; font: 700 2.2rem Georgia, serif; }.roulette-history { display: flex; width: 100%; align-items: center; gap: 9px; margin-top: 14px; color: #afa4ad; font-size: .78rem; }.roulette-history > div { display: flex; flex-wrap: wrap; gap: 4px; }.roulette-result { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; color: #fff; font-size: .67rem; }.roulette-result.roulette-red { background: #a42735; }.roulette-result.roulette-black { background: #252e36; }.roulette-result.roulette-green { background: #1e8b5a; }
.roulette-table-panel { min-width: 0; padding: 17px; border: 1px solid #d5b15b; border-radius: 17px; background: linear-gradient(120deg, #075346, #063c35 60%, #082f2d); box-shadow: inset 0 0 0 6px rgba(3, 28, 26, .65), inset 0 0 80px rgba(0,0,0,.22); }.roulette-bet-bar { display: grid; grid-template-columns: auto minmax(90px, 145px) 1fr; gap: 9px; align-items: center; color: #ecdfc5; font-size: .85rem; }.roulette-bet-bar input { background: rgba(0,0,0,.27); color: #fff; border-color: rgba(251,218,137,.45); }.roulette-bet-bar span { color: #c2d3c9; font-size: .74rem; }.roulette-table-help { margin: 11px 0 16px; color: #e2e5dd; font-size: .82rem; }.roulette-table button { position: relative; min-height: 42px; border: 1px solid rgba(255, 246, 213, .56); color: #fff8e4; background: rgba(4, 47, 39, .62); font-weight: 700; transition: transform .16s ease, background .16s ease, box-shadow .16s ease; }.roulette-table button:not(:disabled):hover, .roulette-table button:not(:disabled):focus-visible { z-index: 2; transform: translateY(-2px); background: #126b59; box-shadow: 0 5px 14px rgba(0,0,0,.24); }.roulette-table button.is-bet::after { content: attr(data-bet-count); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; min-width: 24px; height: 24px; padding: 2px 5px; border: 2px solid #f9db89; border-radius: 50%; background: #8e2134; color: #fff; font-size: .65rem; box-shadow: 0 2px 5px rgba(0,0,0,.45); }.roulette-table button:disabled { opacity: .52; cursor: not-allowed; }.roulette-table { display: grid; grid-template-columns: 46px 1fr; }.roulette-bet-zero { grid-row: span 2; border-radius: 14px 0 0 14px; background: #108d61 !important; }.roulette-number-grid { border-top: 1px solid rgba(255,255,255,.5); }.roulette-number-row { display: grid; grid-template-columns: repeat(12, 1fr); }.roulette-number { min-width: 0; border-left: 0 !important; border-top: 0 !important; }.roulette-number.roulette-red { background: rgba(171, 40, 51, .87); }.roulette-number.roulette-black { background: rgba(22, 29, 35, .91); }.roulette-dozens { grid-column: 2; display: grid; grid-template-columns: repeat(3, 1fr); }.roulette-dozens button { border-left: 0 !important; border-top: 0 !important; font-size: .82rem; }.roulette-dozens small { display: block; font-size: .63rem; color: #c7dbcd; }.roulette-outside { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, 1fr); }.roulette-outside button { border-top: 0 !important; }.roulette-outside button:first-child { border-radius: 0 0 0 12px; }.roulette-outside button:last-child { border-radius: 0 0 12px 0; }.roulette-outside .roulette-red { background: #a82935; }.roulette-outside .roulette-black { background: #1c252d; }.roulette-bets-summary { display: flex; justify-content: space-between; gap: 20px; margin-top: 17px; color: #f3ead5; }.roulette-bets-summary > div > span { color: #b5d4c6; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; }.roulette-bets-summary ul { margin: 5px 0 0; padding-left: 17px; font-size: .85rem; }.roulette-cash { text-align: right; }.roulette-cash strong { display: block; color: #f7d47f; font-size: 1.1rem; }
@media (max-width: 991px) { .roulette-game-layout { grid-template-columns: 1fr; }.roulette-wheel-panel { max-width: 530px; width: 100%; margin: 0 auto; }.roulette-owner-actions { grid-template-columns: 1fr 1fr; }.roulette-owner-actions .roulette-danger-zone { grid-column: span 2; }.roulette-unowned { grid-template-columns: auto 1fr; }.roulette-buy-form, .roulette-locked-note { grid-column: 1 / -1; text-align: left; } }
@media (max-width: 650px) { .roulette-hero, .roulette-owner-panel, .roulette-game, .roulette-unowned { padding: 20px; border-radius: 16px; }.roulette-hero { display: block; min-height: 0; }.roulette-door-status { width: max-content; margin-top: 18px; }.roulette-owner-heading, .roulette-game-topline { align-items: flex-start; flex-direction: column; }.roulette-owner-metrics, .roulette-owner-actions { grid-template-columns: 1fr; }.roulette-owner-actions .roulette-danger-zone { grid-column: auto; }.roulette-ledger ul { grid-template-columns: 1fr; }.roulette-game-layout { margin-top: 15px; }.roulette-wheel-stage { max-width: 290px; }.roulette-table-panel { padding: 10px; overflow: hidden; }.roulette-bet-bar { grid-template-columns: 1fr 100px; }.roulette-bet-bar span { grid-column: 1 / -1; }.roulette-table { grid-template-columns: 35px minmax(0,1fr); }.roulette-table button { min-height: 34px; padding: 1px; font-size: .72rem; }.roulette-number-row { grid-template-columns: repeat(12, minmax(0, 1fr)); }.roulette-dozens button { font-size: .65rem; }.roulette-outside button { font-size: .62rem; }.roulette-bets-summary { display: block; }.roulette-cash { margin-top: 12px; text-align: left; }.roulette-unowned { grid-template-columns: 1fr; }.roulette-unowned-emblem { width: 55px; height: 55px; } }

/* Animația fizică a roții: bila parcurge pista, iar buzunarul câștigător se oprește sub indicator. */
.roulette-wheel-stage { overflow: visible; isolation: isolate; }
.roulette-wheel { transition-duration: 10s; transition-timing-function: cubic-bezier(.08, .6, .08, 1); will-change: transform; }
.roulette-wheel-pocket { height: 47%; pointer-events: none; transform: rotate(var(--angle)) translateX(-50%); }
.roulette-wheel-pocket i { top: auto; bottom: 4px; width: 23px; height: 23px; border-radius: 50%; font-size: 9px; text-shadow: 0 1px 1px rgba(0,0,0,.8); transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; }
.roulette-wheel-pocket.is-winning i { z-index: 4; transform: translateX(-50%) scale(1.3); box-shadow: 0 0 0 3px #fff3bf, 0 0 0 6px rgba(223, 168, 55, .75), 0 0 25px 8px rgba(255, 208, 91, .75); filter: brightness(1.3); animation: roulette-winning-pocket .72s ease-in-out infinite alternate; }
.roulette-ball-orbit { position: absolute; z-index: 5; inset: 17px; display: block; border-radius: 50%; pointer-events: none; transform-origin: 50% 50%; transition: transform 10s cubic-bezier(.12,.69,.09,1); will-change: transform; }
.roulette-ball { position: absolute; top: -3px; left: 50%; width: 16px; height: 16px; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.82); box-shadow: 0 2px 7px #000, 0 0 8px rgba(255,255,255,.55); transition: none; }
.roulette-wheel-pointer { position: absolute; z-index: 7; top: 8px; left: 50%; width: 0; height: 0; transform: translateX(-50%); border-right: 11px solid transparent; border-left: 11px solid transparent; border-top: 22px solid #f7d47c; filter: drop-shadow(0 2px 2px #000); }
.roulette-wheel-pointer::after { content: ''; position: absolute; top: -22px; left: -4px; width: 8px; height: 8px; border-radius: 50%; background: #fff6d8; box-shadow: 0 0 10px #fff0a8; }
.roulette-wheel-stage.is-spinning .roulette-ball { animation: roulette-ball-rattle .12s linear infinite alternate; }
.roulette-phase .roulette-status-dot { background: #59d99b; box-shadow: 0 0 0 4px rgba(89,217,155,.12), 0 0 15px rgba(89,217,155,.75); }
.roulette-phase.is-spinning .roulette-status-dot { background: #f0bb4c; box-shadow: 0 0 0 4px rgba(240,187,76,.14), 0 0 17px rgba(240,187,76,.9); animation: roulette-status-pulse .65s ease-in-out infinite alternate; }
@keyframes roulette-ball-rattle { from { margin-left: -1px; margin-top: 0; } to { margin-left: 1px; margin-top: 2px; } }
@keyframes roulette-winning-pocket { from { filter: brightness(1.15); } to { filter: brightness(1.55); } }
@keyframes roulette-status-pulse { from { opacity: .62; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .roulette-wheel, .roulette-ball-orbit, .roulette-wheel-stage.is-spinning .roulette-ball, .roulette-wheel-pocket.is-winning i, .roulette-phase.is-spinning .roulette-status-dot { transition-duration: .01ms; animation: none; } }

/* Buzunarele sunt SVG: coordonatele fixe nu depind de suportul CSS pentru calc/rotate pe elemente HTML. */
.roulette-wheel-svg { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.roulette-wheel-svg .roulette-wheel-pocket { position: static; display: block; width: auto; height: auto; transform: none; }
.roulette-wheel-svg .roulette-wheel-pocket circle { stroke: rgba(255,255,255,.3); stroke-width: .45; filter: drop-shadow(0 .6px 1px rgba(0,0,0,.8)); transition: stroke .25s ease, stroke-width .25s ease, filter .25s ease; }
.roulette-wheel-svg .roulette-wheel-pocket text { fill: #fff; font: 700 3px Arial, sans-serif; text-anchor: middle; dominant-baseline: middle; pointer-events: none; paint-order: stroke; stroke: rgba(0,0,0,.52); stroke-width: .45px; }
.roulette-wheel-svg .roulette-wheel-pocket.roulette-red circle { fill: #a92331; }.roulette-wheel-svg .roulette-wheel-pocket.roulette-black circle { fill: #172027; }.roulette-wheel-svg .roulette-wheel-pocket.roulette-green circle { fill: #178353; }
.roulette-wheel-svg .roulette-wheel-pocket.is-winning circle { stroke: #fff6ca; stroke-width: 1.35; filter: drop-shadow(0 0 3px #fff2a1) drop-shadow(0 0 5px #dca848); animation: roulette-svg-winning .7s ease-in-out infinite alternate; }
@keyframes roulette-svg-winning { from { opacity: .85; } to { opacity: 1; } }

/* Jetoane, control de sunet și animații fără a afecta etichetele NVDA. */
.roulette-sound-toggle { flex: 0 0 auto; border: 1px solid rgba(255,220,135,.35); border-radius: 999px; padding: .55rem .8rem; color: #ffe4a4; background: rgba(0,0,0,.28); font-size: .76rem; font-weight: 800; transition: background .18s ease, transform .18s ease, border-color .18s ease; }
.roulette-sound-toggle:hover, .roulette-sound-toggle:focus-visible { border-color: #f2ca70; background: rgba(184,128,42,.2); transform: translateY(-1px); }
.roulette-sound-toggle[aria-pressed="false"] { color: #b9afb7; border-color: rgba(255,255,255,.18); }
.roulette-chip-picker { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin: .65rem 0 .9rem; color: #c7ddd1; font-size: .75rem; }
.roulette-chip-picker > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.roulette-chip-picker button { min-height: 30px; padding: .2rem .55rem; border: 1px solid rgba(246,214,137,.45); border-radius: 999px; color: #fff4cf; background: radial-gradient(circle at 35% 25%, #c44852, #6d1729 62%, #39101d); font-size: .72rem; font-weight: 850; box-shadow: inset 0 0 0 2px rgba(255,230,165,.2), 0 2px 4px rgba(0,0,0,.25); transition: transform .16s ease, filter .16s ease, box-shadow .16s ease; }
.roulette-chip-picker button:nth-child(2) { background: radial-gradient(circle at 35% 25%, #4aa7ba, #145067 62%, #0b2938); }
.roulette-chip-picker button:nth-child(3) { background: radial-gradient(circle at 35% 25%, #d3a848, #795317 62%, #3c260c); }
.roulette-chip-picker button:nth-child(4) { background: radial-gradient(circle at 35% 25%, #c5cbd2, #5c6672 62%, #2a3138); }
.roulette-chip-picker button:hover, .roulette-chip-picker button:focus-visible, .roulette-chip-picker button.is-selected { transform: translateY(-2px) scale(1.04); filter: brightness(1.16); box-shadow: inset 0 0 0 2px #fff1b8, 0 4px 10px rgba(0,0,0,.35); }
.roulette-table button.is-bet::before { content: ''; position: absolute; z-index: 2; top: 50%; left: 50%; width: 30px; height: 30px; border: 2px dashed rgba(255,245,198,.9); border-radius: 50%; background: radial-gradient(circle at 30% 25%, #e15d66, #8e2134 58%, #4e1120); box-shadow: inset 0 0 0 2px rgba(255,255,255,.22), 0 2px 6px rgba(0,0,0,.55); transform: translate(-50%,-50%); animation: roulette-chip-drop .35s cubic-bezier(.16,1,.3,1) both; }
.roulette-table button.is-bet::after { content: attr(data-bet-total) ' $'; position: absolute; z-index: 3; top: 50%; left: 50%; min-width: 30px; color: #fff8dc; font-size: .54rem; line-height: 1; text-align: center; text-shadow: 0 1px 1px #4a0c17; transform: translate(-50%,-50%); }
@keyframes roulette-chip-drop { from { opacity: 0; transform: translate(-50%,-90%) scale(.5) rotate(-16deg); } to { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0); } }
@media (max-width: 650px) { .roulette-sound-toggle { align-self: flex-start; }.roulette-chip-picker { align-items: flex-start; flex-direction: column; }.roulette-chip-picker > div { justify-content: flex-start; }.roulette-chip-picker button { min-height: 34px; } }

/* Finisaj vizual realist, fără WebGL: reflexii, profunzime și lumină controlată. */
.roulette-wheel-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: radial-gradient(circle at 50% 37%, rgba(164, 94, 37, .36) 0 16%, rgba(69, 40, 30, .82) 36%, #131215 66%, #090b0e 90%);
    box-shadow: inset 0 1px 0 rgba(255, 239, 178, .12), inset 0 -28px 50px rgba(0, 0, 0, .34), 0 18px 35px rgba(0, 0, 0, .22);
}
.roulette-wheel-panel::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: -25% -15%;
    background: linear-gradient(116deg, transparent 38%, rgba(255, 232, 165, .1) 48%, transparent 58%);
    transform: translateX(-35%);
    animation: roulette-light-sweep 8s ease-in-out infinite;
    pointer-events: none;
}
.roulette-wheel-panel > * { position: relative; z-index: 1; }
.roulette-wheel-stage::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 7%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(246, 190, 79, .22), rgba(191, 95, 35, .08) 45%, transparent 72%);
    filter: blur(13px);
    opacity: .78;
    pointer-events: none;
}
.roulette-wheel-stage::before {
    box-shadow: inset 0 0 0 1px rgba(255, 237, 174, .48), 0 0 0 7px rgba(35, 16, 10, .68), 0 0 26px rgba(216, 145, 42, .28);
}
.roulette-wheel {
    background: conic-gradient(from -4.86deg, #e3b758 0deg 1deg, #7a471c 1deg 4.86deg, #a36a29 4.86deg 9.72deg);
    border-color: #4a2814;
    box-shadow: inset 0 0 0 4px rgba(255, 222, 127, .22), inset 0 0 0 10px #c7963f, inset 0 0 35px #0b0704, 0 8px 16px rgba(0, 0, 0, .34);
}
.roulette-wheel::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 8%;
    border-radius: 50%;
    border: 2px solid rgba(255, 225, 140, .34);
    box-shadow: inset 0 0 0 5px rgba(50, 25, 11, .42), inset 0 0 18px rgba(255, 212, 102, .18);
    background: radial-gradient(circle at 50% 48%, transparent 0 55%, rgba(22, 10, 5, .34) 78%, rgba(255, 214, 105, .16) 100%);
    pointer-events: none;
}
.roulette-wheel::after { box-shadow: inset 0 0 19px #1e0d07, 0 3px 8px rgba(0, 0, 0, .38); }
.roulette-wheel-pocket i { border: 1px solid rgba(255, 248, 211, .24); box-shadow: inset 0 1px 2px rgba(255, 255, 255, .25), inset 0 -3px 4px rgba(0, 0, 0, .28), 0 2px 4px rgba(0, 0, 0, .55); }
.roulette-wheel-svg .roulette-wheel-pocket circle { stroke: rgba(255, 255, 255, .42); filter: drop-shadow(0 .8px 1.2px rgba(0, 0, 0, .9)); }
.roulette-wheel-pointer { filter: drop-shadow(0 2px 2px #000) drop-shadow(0 0 5px rgba(255, 210, 103, .5)); }
.roulette-wheel-stage.is-spinning::before { animation: roulette-ring-glow 1.1s ease-in-out infinite alternate; }
.roulette-wheel-stage.is-spinning::after { opacity: 1; animation: roulette-wheel-halo 1.3s ease-in-out infinite alternate; }
.roulette-result-screen { position: relative; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 8px 18px rgba(0, 0, 0, .2); transition: border-color .25s ease, box-shadow .25s ease, background .25s ease; }
.roulette-result-screen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .08) 50%, transparent 75%); transform: translateX(-110%); pointer-events: none; }
.roulette-result-screen.is-win { border-color: rgba(126, 225, 170, .68); background: linear-gradient(145deg, rgba(13, 57, 40, .95), #090c11 72%); box-shadow: inset 0 1px 0 rgba(176, 255, 207, .18), 0 0 22px rgba(70, 204, 137, .2); }
.roulette-result-screen.is-win::after { animation: roulette-result-shine .9s ease-out both; }
.roulette-result-screen.is-loss { border-color: rgba(245, 138, 132, .45); background: linear-gradient(145deg, rgba(64, 24, 32, .9), #090c11 72%); }
.roulette-result-screen.is-win [data-roulette-result-label] { color: #a9efc5; }
.roulette-result-screen.is-loss [data-roulette-result-label] { color: #f3aaa4; }
.roulette-table button.is-bet { box-shadow: inset 0 0 0 1px rgba(255, 235, 167, .25), 0 0 14px rgba(225, 93, 102, .17); }
.roulette-table button.is-bet::before { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25), 0 2px 7px rgba(0, 0, 0, .6), 0 0 8px rgba(228, 92, 102, .32); }
@keyframes roulette-light-sweep { 0%, 100% { opacity: .18; transform: translateX(-35%); } 50% { opacity: .65; transform: translateX(35%); } }
@keyframes roulette-ring-glow { from { box-shadow: inset 0 0 0 1px rgba(255, 237, 174, .42), 0 0 0 7px rgba(35, 16, 10, .68), 0 0 22px rgba(216, 145, 42, .22); } to { box-shadow: inset 0 0 0 1px rgba(255, 237, 174, .8), 0 0 0 7px rgba(35, 16, 10, .68), 0 0 34px rgba(255, 196, 66, .46); } }
@keyframes roulette-wheel-halo { from { transform: scale(.97); opacity: .68; } to { transform: scale(1.04); opacity: 1; } }
@keyframes roulette-result-shine { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
@media (prefers-reduced-motion: reduce) { .roulette-wheel-panel::before, .roulette-wheel-stage.is-spinning::before, .roulette-wheel-stage.is-spinning::after, .roulette-result-screen.is-win::after { animation: none; } }

/* Seiful comun */
.safe-shell { max-width: 1180px; }
.safe-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 2rem; overflow: hidden; padding: clamp(1.35rem, 3vw, 2.4rem); border: 1px solid rgba(216, 170, 73, .35); border-radius: 1.35rem; background: radial-gradient(circle at 74% 55%, rgba(183, 116, 35, .2), transparent 17rem), linear-gradient(125deg, rgba(26, 22, 20, .98), rgba(13, 16, 22, .98) 62%, rgba(39, 23, 18, .96)); box-shadow: 0 18px 50px rgba(0, 0, 0, .3), inset 0 1px rgba(255,255,255,.04); }
.safe-hero::after { position: absolute; inset: auto 0 0; height: 3px; content: ''; background: linear-gradient(90deg, transparent, #b4772d, #edce7b, transparent); opacity: .8; }
.safe-hero-copy { position: relative; z-index: 1; }
.safe-hero h1 { margin: 0 0 .6rem; font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 900; letter-spacing: -.035em; }
.safe-hero-copy > p:last-child { max-width: 42rem; margin: 0; color: var(--mg-muted); font-size: 1.02rem; }
.safe-door { position: relative; width: clamp(130px, 16vw, 188px); aspect-ratio: 1; overflow: hidden; border: 7px solid #4f3924; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #5b6265 0, #343a3d 24%, #171c20 55%, #0a0c0f 72%); box-shadow: inset 0 0 0 4px #151619, inset 0 0 0 7px #92703b, inset 0 0 28px #000, 0 13px 28px rgba(0,0,0,.56), 0 0 26px rgba(218,164,66,.16); }
.safe-door-ring { position: absolute; border: 2px solid rgba(217, 182, 112, .56); border-radius: 50%; }
.safe-door-ring-outer { inset: 12%; box-shadow: inset 0 0 12px #090a0c, 0 0 9px rgba(0,0,0,.8); }
.safe-door-ring-inner { inset: 24%; border-color: rgba(215, 222, 224, .32); box-shadow: inset 0 0 14px #07090b; }
.safe-door-handle { position: absolute; top: 50%; left: 50%; width: 30%; height: 30%; border: 5px solid #b99451; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #6b7071, #1b2022 70%); box-shadow: 0 0 0 4px #121416, inset 0 0 8px #000, 0 3px 8px #000; transform: translate(-50%,-50%); }
.safe-door-handle::before, .safe-door-handle::after { position: absolute; top: 50%; left: 50%; content: ''; background: #c4a15e; border-radius: 99px; transform: translate(-50%,-50%); }
.safe-door-handle::before { width: 145%; height: 5px; }
.safe-door-handle::after { width: 5px; height: 145%; }
.safe-door-bolt { position: absolute; width: 9px; height: 17px; border: 1px solid #caa55f; border-radius: 4px; background: linear-gradient(90deg, #4b5052, #c3a05e, #373a3a); box-shadow: 0 2px 4px #000; }
.safe-door-bolt-one { top: 19%; left: 48%; }
.safe-door-bolt-two { top: 48%; right: 18%; transform: rotate(90deg); }
.safe-door-bolt-three { bottom: 18%; left: 48%; }
.safe-door-bolt-four { top: 48%; left: 18%; transform: rotate(90deg); }
.safe-door-mark { position: absolute; right: 8%; bottom: 7%; display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border: 1px solid rgba(239,202,120,.7); border-radius: 50%; color: #f0d18a; background: #171718; font-size: .65rem; font-weight: 900; }
.safe-prize-panel { position: relative; z-index: 1; display: grid; gap: .25rem; min-width: 150px; padding: 1rem 1.15rem; border: 1px solid rgba(216,170,73,.35); border-radius: 1rem; background: rgba(7,9,12,.66); box-shadow: inset 0 1px rgba(255,255,255,.04); }
.safe-prize-panel span, .safe-prize-panel small { color: var(--mg-muted); }
.safe-prize-panel strong { color: #f4d482; font-size: clamp(1.25rem, 2vw, 1.65rem); font-variant-numeric: tabular-nums; white-space: nowrap; }
.safe-personal-result { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; margin-top: 1.25rem; padding: 1rem 1.2rem; border: 1px solid rgba(124,199,255,.4); border-radius: .9rem; color: #d8ebff; background: linear-gradient(100deg, rgba(22,52,75,.8), rgba(13,20,29,.92)); }
.safe-personal-result strong { color: #a8d9ff; }
.safe-personal-result.is-winner { border-color: rgba(99,213,153,.55); color: #e1ffeb; background: linear-gradient(100deg, rgba(18,67,47,.88), rgba(13,23,21,.95)); }
.safe-personal-result.is-winner strong { color: #9cf0bf; }
.safe-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .8fr); gap: 1.25rem; margin-top: 1.35rem; }
.safe-locker-card, .safe-clue-card, .safe-history { min-width: 0; padding: clamp(1rem, 2.3vw, 1.5rem); border: 1px solid rgba(173,184,198,.17); border-radius: 1.1rem; background: linear-gradient(150deg, rgba(24,30,40,.97), rgba(13,17,24,.98)); box-shadow: 0 12px 30px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.035); }
.safe-section-heading, .safe-history-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.safe-section-heading h2, .safe-clue-card h2, .safe-history-heading h2 { margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 800; }
.safe-section-heading .eyebrow, .safe-clue-card .eyebrow, .safe-history-heading .eyebrow { margin-bottom: .35rem; }
.safe-attempt-counter { padding: .5rem .75rem; border: 1px solid rgba(216,170,73,.28); border-radius: 99px; color: #f2d28a; background: rgba(92,65,23,.22); font-size: .83rem; font-weight: 750; text-align: center; }
.safe-cost-strip { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; margin: 1.2rem 0; padding: .75rem .9rem; border: 1px solid rgba(255,255,255,.07); border-radius: .75rem; color: var(--mg-muted); background: rgba(5,7,10,.38); font-size: .9rem; }
.safe-cost-strip strong { color: var(--mg-text); }
.safe-code-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.safe-code-fieldset legend { margin-bottom: .85rem; color: var(--mg-muted); font-size: .93rem; }
.safe-code-slots { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.1rem; }
.safe-letter-slots, .safe-digit-slots { display: grid; gap: .7rem; }
.safe-letter-slots { grid-template-columns: repeat(4, minmax(0,1fr)); }
.safe-digit-slots { grid-template-columns: repeat(2, minmax(0,1fr)); }
.safe-slot { display: grid; gap: .38rem; min-width: 0; color: #c4ccd8; font-size: .82rem; font-weight: 700; text-align: center; }
.safe-slot input { width: 100%; min-width: 0; height: clamp(3.4rem, 6vw, 4.15rem); padding: .2rem; border: 1px solid rgba(216,170,73,.4); border-radius: .75rem; outline: 0; color: #fff5d9; background: linear-gradient(160deg, #292a29, #101318 70%); box-shadow: inset 0 3px 10px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.2); font-size: clamp(1.55rem, 3.5vw, 2rem); font-weight: 900; text-align: center; text-transform: uppercase; caret-color: #f3d486; }
.safe-slot input:focus { border-color: #7cc7ff; box-shadow: 0 0 0 3px rgba(124,199,255,.25), inset 0 3px 10px rgba(0,0,0,.5); }
.safe-slot input:disabled { opacity: .55; }
.safe-submit-button { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; width: 100%; min-height: 3.35rem; margin-top: 1.1rem; font-weight: 850; letter-spacing: .015em; }
.safe-submit-button svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
.safe-submit-button:disabled { cursor: not-allowed; opacity: .55; }
.safe-form-note { margin: .7rem 0 0; color: var(--mg-muted); font-size: .83rem; text-align: center; }
.safe-clue-card { background: radial-gradient(circle at 90% 0, rgba(26,91,118,.15), transparent 16rem), linear-gradient(150deg, rgba(22,29,38,.98), rgba(12,16,22,.98)); }
.safe-clue-legend { display: grid; gap: .8rem; margin: 1rem 0; padding: 0; list-style: none; }
.safe-clue-legend li { display: grid; grid-template-columns: 1.5rem 1fr; align-items: start; gap: .6rem; color: #d4dae3; font-size: .91rem; }
.safe-clue-legend strong { color: #fff; }
.safe-status-swatch { display: grid; width: 1.25rem; height: 1.25rem; place-items: center; overflow: hidden; border-radius: .35rem; color: transparent; font-size: .65rem; }
.safe-status-swatch.is-exact { color: #06121c; background: #55b9ef; box-shadow: 0 0 12px rgba(71,178,238,.28); }
.safe-status-swatch.is-present { color: #06170e; background: #5bd58c; box-shadow: 0 0 12px rgba(91,213,140,.24); }
.safe-status-swatch.is-absent { color: #fff; background: #d44d52; box-shadow: 0 0 12px rgba(212,77,82,.22); }
.safe-public-note { margin: 1rem 0 0; padding: .8rem; border-left: 3px solid #4ab2e7; border-radius: 0 .55rem .55rem 0; color: #c2d6e1; background: rgba(30,98,126,.13); font-size: .88rem; }
.safe-history { margin-top: 1.35rem; }
.safe-history-heading { align-items: center; margin-bottom: 1rem; }
.safe-history-heading > span { color: var(--mg-muted); font-size: .83rem; }
.safe-empty-history { margin: 0; padding: 1.2rem; border: 1px dashed rgba(216,170,73,.25); border-radius: .75rem; color: var(--mg-muted); text-align: center; }
.safe-attempt-list { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.safe-attempt-card { display: grid; grid-template-columns: minmax(125px, .65fr) minmax(0, 1.7fr); align-items: center; gap: .9rem; padding: .85rem; border: 1px solid rgba(255,255,255,.075); border-radius: .8rem; background: rgba(5,7,10,.34); }
.safe-attempt-card.is-winner { border-color: rgba(91,213,140,.42); background: linear-gradient(100deg, rgba(22,71,48,.33), rgba(6,9,12,.42)); }
.safe-attempt-meta { display: grid; gap: .16rem; min-width: 0; }
.safe-attempt-meta strong { overflow: hidden; color: #f2d184; text-overflow: ellipsis; }
.safe-attempt-meta > span { color: var(--mg-muted); font-size: .76rem; }
.safe-winner-tag { color: #8ceab2; font-size: .74rem; }
.safe-attempt-slots { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: .4rem; min-width: 0; }
.safe-history-slot { display: grid; min-width: 0; min-height: 3.25rem; place-items: center; align-content: center; gap: .1rem; border: 1px solid transparent; border-radius: .55rem; }
.safe-history-slot b { font-size: 1.1rem; line-height: 1.1; }
.safe-history-slot small { font-size: clamp(.53rem, .9vw, .68rem); line-height: 1.1; text-align: center; }
.safe-history-slot.is-exact { border-color: rgba(85,185,239,.56); color: #d8f3ff; background: rgba(45,139,185,.3); }
.safe-history-slot.is-present { border-color: rgba(91,213,140,.5); color: #d5ffe4; background: rgba(40,137,78,.28); }
.safe-history-slot.is-absent { border-color: rgba(212,77,82,.45); color: #ffe2e0; background: rgba(142,39,44,.27); }
.safe-schema-error { max-width: 760px; margin: 3rem auto; padding: 2rem; border: 1px solid rgba(212,77,82,.5); border-radius: 1rem; background: rgba(69,25,30,.52); }
.safe-schema-error h1 { margin-top: 0; }
.safe-schema-error p { margin-bottom: 0; color: #f0dede; }
@media (max-width: 767.98px) {
    .safe-hero { grid-template-columns: minmax(0, 1fr) auto; gap: .8rem; padding: 1.1rem; }
    .safe-hero > * { min-width: 0; }
    .safe-hero-copy { grid-column: 1 / -1; }
    .safe-hero-copy > p:last-child { font-size: .95rem; }
    .safe-door { width: clamp(82px, 24vw, 115px); justify-self: center; }
    .safe-prize-panel { min-width: 0; padding: .75rem .85rem; }
    .safe-prize-panel strong { font-size: clamp(1.1rem, 4vw, 1.35rem); overflow-wrap: anywhere; white-space: normal; }
    .safe-layout { grid-template-columns: 1fr; }
    .safe-section-heading, .safe-history-heading { align-items: flex-start; flex-direction: column; gap: .65rem; }
    .safe-attempt-counter { align-self: flex-start; max-width: 100%; }
    .safe-code-slots { grid-template-columns: 1fr; gap: .8rem; }
    .safe-letter-slots { grid-template-columns: repeat(4, minmax(0,1fr)); }
    .safe-digit-slots { grid-template-columns: repeat(2, minmax(0,1fr)); width: calc(50% - .35rem); justify-self: center; }
    .safe-slot { font-size: .78rem; }
    .safe-attempt-card { grid-template-columns: 1fr; gap: .65rem; }
    .safe-attempt-slots { gap: .3rem; }
    .safe-history-slot { min-height: 3.75rem; }
    .safe-history-slot small { font-size: .75rem; line-height: 1.2; overflow-wrap: anywhere; }
}
@media (max-width: 600px) {
    .safe-attempt-slots { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 420px) {
    .safe-shell { padding-right: .7rem; padding-left: .7rem; }
    .safe-attempt-counter { font-size: .78rem; }
    .safe-cost-strip { display: grid; }
}
@media (max-width: 359.98px) {
    .safe-hero { grid-template-columns: 1fr; }
    .safe-hero-copy { grid-column: auto; }
    .safe-door { display: none; }
    .safe-prize-panel { width: 100%; }
    .safe-letter-slots { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .safe-digit-slots { width: 100%; }
    .safe-attempt-slots { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .safe-door, .safe-history-slot, .safe-submit-button { scroll-behavior: auto; transition: none; }
}

/* Închisoarea orașului */
.prison-page {
    background:
        radial-gradient(circle at 75% 12%, rgba(139, 154, 160, .08), transparent 27rem),
        linear-gradient(180deg, #080b0d 0, #0c1013 48%, #090b0d 100%);
}
.prison-shell { max-width: 1240px; }
.prison-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(260px, .85fr) minmax(390px, 1.3fr) minmax(180px, .48fr);
    min-height: 390px;
    overflow: hidden;
    border: 1px solid rgba(177, 188, 190, .2);
    border-radius: 1.15rem;
    background: linear-gradient(135deg, rgba(32, 39, 42, .97), rgba(10, 13, 15, .99));
    box-shadow: 0 28px 65px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .05);
}
.prison-hero::before {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, transparent 0 63px, rgba(255, 255, 255, .012) 64px 65px);
    content: "";
    pointer-events: none;
}
.prison-hero-copy {
    position: relative;
    z-index: 2;
    align-self: center;
    padding: clamp(1.3rem, 3vw, 2.4rem);
}
.prison-hero-copy h1 { margin: .18rem 0 .8rem; color: #f3f1e9; font-size: clamp(2rem, 4.5vw, 3.7rem); letter-spacing: -.045em; }
.prison-hero-copy > p:last-child { max-width: 34rem; margin: 0; color: #b9c0c1; line-height: 1.65; }
.prison-scene { position: relative; z-index: 1; min-width: 0; perspective: 900px; }
.prison-wall {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-inline: 1px solid rgba(255, 255, 255, .08);
    background:
        linear-gradient(100deg, transparent 38%, rgba(221, 231, 217, .07) 62%, transparent 78%),
        repeating-linear-gradient(0deg, transparent 0 34px, rgba(3, 5, 6, .46) 35px 38px),
        repeating-linear-gradient(90deg, #333b3d 0 72px, #242a2c 73px 77px, #303739 78px 145px);
    box-shadow: inset 0 0 90px #030506;
}
.prison-lamp { position: absolute; top: 0; left: 50%; z-index: 5; width: 76px; height: 16px; border-radius: 0 0 8px 8px; background: #111719; box-shadow: 0 4px 9px #000; transform: translateX(-50%); }
.prison-lamp i { position: absolute; top: 12px; left: -65px; width: 205px; height: 255px; clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(229, 238, 204, .23), rgba(210, 222, 180, .03)); filter: blur(2px); animation: prison-light-flicker 5.8s infinite; }
.prison-camera { position: absolute; top: 28px; right: 25px; z-index: 5; width: 47px; height: 21px; border: 3px solid #111517; border-radius: 4px 10px 10px 4px; background: #798185; box-shadow: -5px 5px 10px #080a0b; transform: rotate(14deg); }
.prison-camera::before { position: absolute; top: 3px; right: 4px; width: 9px; height: 9px; border: 2px solid #090b0c; border-radius: 50%; background: #8c1f1f; box-shadow: 0 0 9px rgba(223, 43, 43, .8); content: ""; }
.prison-camera::after { position: absolute; top: -17px; left: 3px; width: 6px; height: 20px; background: #171c1e; content: ""; }
.prison-sign { position: absolute; top: 30px; left: 22px; z-index: 4; padding: .24rem .6rem; border: 1px solid #858e8e; color: #cdd2d0; background: #202628; font: 700 .67rem/1.1 monospace; letter-spacing: .13em; transform: rotate(-1.5deg); }
.prison-cell { position: absolute; inset: 64px 40px 25px; transform: rotateY(-3deg); transform-style: preserve-3d; }
.prison-cell-depth { position: absolute; inset: 0; border: 9px solid #161b1d; background: radial-gradient(ellipse at 54% 16%, rgba(114, 127, 123, .2), transparent 45%), linear-gradient(#111719, #080b0c); box-shadow: inset 0 0 55px #000, 0 0 0 2px #50595a; }
.prison-bench { position: absolute; right: 13%; bottom: 24px; z-index: 2; width: 48%; height: 20px; border-radius: 2px; background: linear-gradient(#62615b, #272b2b); box-shadow: 0 10px 0 -4px #161a1b, 0 17px 19px #000; }
.prison-character-window { position: absolute; bottom: 18px; left: 50%; z-index: 3; width: min(94%, 370px); height: 100%; overflow: hidden; transform: translateX(-50%); animation: prison-character-breathe 3.8s ease-in-out infinite; }
.prison-character { position: absolute; bottom: 0; left: 50%; width: max(160%, 470px); max-width: none; height: auto; max-height: none; image-rendering: pixelated; filter: saturate(.88) brightness(.92) drop-shadow(0 12px 12px #000); transform: translateX(-50%); }
.prison-shadow { position: absolute; bottom: 8px; left: 50%; z-index: 2; width: 45%; height: 18px; border-radius: 50%; background: rgba(0, 0, 0, .8); filter: blur(7px); transform: translateX(-50%); }
.prison-bars { position: absolute; inset: 0; z-index: 6; display: flex; justify-content: space-between; padding: 0 7px; border: 8px solid #161b1d; box-shadow: inset 0 0 0 2px #697173, 0 8px 18px rgba(0, 0, 0, .55); transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
.prison-bars > i { display: block; width: 12px; height: 100%; border-inline: 1px solid #858c8c; background: linear-gradient(90deg, #1b2021, #777f80 43%, #252b2c 70%); box-shadow: 3px 0 5px rgba(0, 0, 0, .65); }
.prison-bars > b { position: absolute; right: 0; left: 0; height: 13px; border-block: 1px solid #747c7d; background: linear-gradient(#4c5455, #1b2021); box-shadow: 0 3px 5px #000; }
.prison-bars > b:first-of-type { top: 28%; }
.prison-bars > b:last-of-type { bottom: 27%; }
.prison-lock { position: absolute; top: 51%; right: 21%; z-index: 8; width: 39px; height: 37px; border: 2px solid #181b1b; border-radius: 5px; background: linear-gradient(135deg, #c2a653, #6c5620); box-shadow: 0 5px 8px #000; }
.prison-lock::before { position: absolute; top: -18px; left: 8px; width: 20px; height: 21px; border: 5px solid #a88c41; border-bottom: 0; border-radius: 12px 12px 0 0; content: ""; }
.prison-lock i { position: absolute; top: 12px; left: 16px; width: 5px; height: 12px; border-radius: 50% 50% 2px 2px; background: #171714; }
.prison-floor-light { position: absolute; right: 8%; bottom: -15px; width: 70%; height: 65px; border-radius: 50%; background: rgba(215, 225, 189, .08); filter: blur(15px); }
.prison-hero.is-opening .prison-bars { transform: translateX(78%); }
.prison-hero.is-opening .prison-lock { opacity: 0; transform: rotate(25deg) translateY(40px); transition: .55s; }
.prison-hero.is-locked .prison-bars { animation: prison-bars-close .9s cubic-bezier(.18,.82,.25,1) both; }
.prison-hero.is-locked .prison-lock { animation: prison-lock-slam .35s .82s both; }
.prison-status-card { position: relative; z-index: 3; align-self: end; display: grid; gap: .5rem; margin: 1rem; padding: 1rem; border: 1px solid rgba(255,255,255,.12); border-radius: .8rem; background: rgba(8, 11, 12, .78); box-shadow: 0 10px 25px rgba(0,0,0,.35); backdrop-filter: blur(6px); }
.prison-status-card > div { display: grid; gap: .12rem; min-width: 0; }
.prison-status-card span, .prison-status-card small { color: #9da7a8; font-size: .75rem; }
.prison-status-card strong { overflow: hidden; color: #e6e2d6; text-overflow: ellipsis; }
.prison-status-light { width: 10px; height: 10px; border-radius: 50%; background: #4baa71; box-shadow: 0 0 10px rgba(75,170,113,.7); }
.prison-status-card.no-owner .prison-status-light { background: #b94646; box-shadow: 0 0 10px rgba(185,70,70,.7); }
.prison-release-banner { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid rgba(91,213,140,.38); border-radius: .75rem; color: #d9f7e4; background: rgba(31,91,58,.32); }
.prison-release-banner span { color: #b8d9c4; }
.prison-arrest-report { display: grid; grid-template-columns: minmax(350px,1.2fr) minmax(280px,.8fr); overflow: hidden; margin-bottom: 1.2rem; border: 1px solid rgba(82,135,185,.38); border-radius: 1rem; background: #0b1015; box-shadow: 0 20px 46px rgba(0,0,0,.38); }
.prison-arrest-scene { position: relative; min-height: 260px; overflow: hidden; background: #071015; isolation: isolate; }
.prison-gta-cinematic { min-height: 100%; }
.prison-gta-cinematic canvas { display: block; width: 100%; height: 100%; min-height: 260px; object-fit: cover; aspect-ratio: 2; }
.prison-gta-cinematic .gta-cinematic-location { top: auto; right: .8rem; bottom: .8rem; left: auto; z-index: 2; padding: .25rem .5rem; border-radius: .25rem; background: rgba(4,7,10,.72); }
.prison-gta-cinematic .gta-cinematic-caption { z-index: 2; }
.prison-arrest-scene::after { position: absolute; z-index: 1; inset: 0; border: 1px solid rgba(255,255,255,.06); background: linear-gradient(110deg,rgba(204,42,42,.10),transparent 42%,rgba(36,101,225,.12)); content: ""; pointer-events: none; animation: arrest-siren-wash .8s steps(2,end) infinite; }
.prison-arrest-scene-label { position: absolute; z-index: 3; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .6rem; border: 1px solid rgba(255,255,255,.22); border-radius: .3rem; color: #f2e5d5; background: rgba(4,7,10,.78); font: 800 .66rem/1.2 monospace; letter-spacing: .08em; }
.prison-arrest-scene-label i { width: .5rem; height: .5rem; border-radius: 50%; background: #ef4545; box-shadow: 0 0 12px #ef4545; animation: police-light-red .55s infinite steps(2,end); }
.prison-arrest-report.has-police .prison-arrest-scene-label i { background: #477dff; box-shadow: 0 0 12px #477dff; animation: police-light-blue .55s infinite steps(2,end); }
.prison-bail-jump { display: inline-flex; margin-top: .9rem; }
.prison-arrest-copy { align-self: center; padding: clamp(1.1rem,2.7vw,2rem); }
.prison-arrest-copy h2 { margin: .18rem 0 .7rem; color: #f0f2ef; font-size: clamp(1.35rem,3vw,2.1rem); }
.prison-arrest-copy > p:not(.eyebrow):not(.prison-vehicle-kept) { color: #b8c1c4; line-height: 1.6; }
.prison-arrest-facts { display: grid; gap: .35rem; margin-top: .85rem; padding: .75rem; border-left: 3px solid #b84949; background: rgba(255,255,255,.035); }
.prison-arrest-facts span { color: #aab4b6; font-size: .83rem; }.prison-arrest-facts strong { color: #f0d48f; }
.prison-vehicle-kept { margin: .65rem 0 0; color: #8fdeb0; font-weight: 700; }
@keyframes police-light-red { 0%,49% { opacity: 1; } 50%,100% { opacity: .25; } }
@keyframes police-light-blue { 0%,49% { opacity: .25; } 50%,100% { opacity: 1; } }
@keyframes arrest-siren-wash { 0%,49% { box-shadow: inset 28px 0 70px rgba(213,43,43,.2); } 50%,100% { box-shadow: inset -28px 0 70px rgba(43,104,220,.22); } }
.prison-detention-card, .prison-unowned, .prison-roster, .prison-owner-dashboard { margin-top: 1.2rem; border: 1px solid rgba(177,188,190,.16); border-radius: 1rem; background: linear-gradient(145deg, rgba(27,33,35,.94), rgba(12,16,18,.97)); box-shadow: 0 18px 38px rgba(0,0,0,.22); }
.prison-detention-card { display: grid; grid-template-columns: auto minmax(0,1fr) minmax(215px,.55fr); align-items: center; gap: 1.2rem; padding: clamp(1rem, 2.4vw, 1.6rem); border-color: rgba(194,166,83,.32); }
.prison-mugshot-number { display: grid; width: 72px; height: 86px; place-items: center; border: 2px solid #b5b8b4; color: #e5e5df; background: repeating-linear-gradient(0deg,#202628 0 9px,#272e30 10px); font: 700 1rem monospace; box-shadow: 0 7px 15px #080a0b; }
.prison-detention-copy h2 { margin: .15rem 0 .6rem; font-size: clamp(1.3rem, 3vw, 2rem); }
.prison-detention-copy > p:last-of-type { margin-bottom: .85rem; color: #bbc2c2; }
.prison-personal-timer { display: inline-flex; align-items: baseline; gap: .65rem; padding: .55rem .85rem; border: 1px solid rgba(210,86,72,.35); border-radius: .55rem; background: rgba(90,28,25,.28); }
.prison-personal-timer span { color: #d6b8b2; font-size: .75rem; text-transform: uppercase; letter-spacing: .09em; }
.prison-personal-timer strong { color: #ffcec5; font: 800 1.5rem/1 monospace; letter-spacing: .04em; }
.prison-bail-box { display: grid; gap: .42rem; padding: 1rem; border-left: 1px solid rgba(255,255,255,.1); }
.prison-bail-box > span { color: #aeb6b6; font-size: .74rem; text-transform: uppercase; letter-spacing: .11em; }
.prison-bail-box > strong { color: #f1ce75; font-size: 1.7rem; }
.prison-bail-box small { color: #98a2a3; line-height: 1.45; }
.prison-unowned { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 1.25rem; padding: 1.3rem; }
.prison-key-emblem { position: relative; width: 70px; height: 70px; border: 1px solid rgba(194,166,83,.35); border-radius: 50%; background: rgba(194,166,83,.08); }
.prison-key-emblem::before { position: absolute; top: 20px; left: 17px; width: 22px; height: 22px; border: 5px solid #c2a653; border-radius: 50%; content: ""; }
.prison-key-emblem span { position: absolute; top: 31px; left: 39px; width: 24px; height: 6px; background: #c2a653; transform: rotate(-35deg); transform-origin: left center; }
.prison-key-emblem span::after { position: absolute; right: 1px; bottom: 0; width: 6px; height: 12px; background: #c2a653; content: ""; }
.prison-unowned h2 { margin: .12rem 0 .35rem; }
.prison-unowned p:last-child { margin: 0; color: #aeb7b7; }
.prison-purchase-form { display: grid; min-width: 190px; gap: .28rem; padding: .9rem; border: 1px solid rgba(194,166,83,.22); border-radius: .7rem; background: rgba(8,10,11,.35); text-align: center; }
.prison-purchase-form span { color: #aab2b3; font-size: .74rem; }
.prison-purchase-form strong { color: #f1ce75; font-size: 1.45rem; }
.prison-roster, .prison-owner-dashboard { padding: clamp(1rem, 2.4vw, 1.5rem); }
.prison-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.prison-section-heading h2 { margin: .12rem 0 0; }
.prison-section-heading > span { padding: .35rem .65rem; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: #aeb7b7; background: rgba(255,255,255,.035); font-size: .78rem; }
.prison-empty-roster { display: flex; align-items: center; justify-content: center; gap: .8rem; min-height: 110px; border: 1px dashed rgba(177,188,190,.2); border-radius: .75rem; color: #aeb7b7; }
.prison-empty-roster > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #9ae2b4; background: rgba(58,137,87,.25); }
.prison-empty-roster p { margin: 0; }
.prison-roster-list { display: grid; gap: .65rem; }
.prison-inmate-card { display: grid; grid-template-columns: auto minmax(100px,.7fr) minmax(110px,.7fr) minmax(180px,1.4fr) minmax(105px,.55fr); align-items: center; gap: .8rem; padding: .82rem; border: 1px solid rgba(255,255,255,.075); border-radius: .7rem; background: rgba(5,8,9,.42); transition: opacity .3s, transform .3s; }
.prison-inmate-card.is-current-user { border-color: rgba(194,166,83,.42); background: linear-gradient(90deg, rgba(103,82,31,.2), rgba(5,8,9,.45)); }
.prison-inmate-card.is-released { opacity: .4; transform: translateX(8px); }
.prison-inmate-index { color: #707a7b; font: 700 .8rem monospace; }
.prison-inmate-card > div { display: grid; min-width: 0; gap: .1rem; }
.prison-inmate-card > div > span { color: #818d8e; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.prison-inmate-card > div > strong { overflow: hidden; color: #dce0de; font-size: .9rem; text-overflow: ellipsis; }
.prison-inmate-time strong { color: #f0bd77 !important; font: 800 1.05rem monospace; }
.prison-owner-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; margin-bottom: .8rem; }
.prison-owner-stats > div { display: grid; gap: .2rem; padding: 1rem; border: 1px solid rgba(255,255,255,.08); border-radius: .7rem; background: rgba(5,8,9,.38); }
.prison-owner-stats span { color: #899596; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; }
.prison-owner-stats strong { color: #efce79; font-size: 1.35rem; }
.prison-owner-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .8rem; }
.prison-control-card { padding: 1rem; border: 1px solid rgba(255,255,255,.08); border-radius: .75rem; background: linear-gradient(145deg, rgba(42,49,51,.62), rgba(11,14,15,.62)); }
.prison-control-card.is-danger { border-color: rgba(185,70,70,.24); }
.prison-control-card h3 { margin: .15rem 0 .45rem; }
.prison-control-card > p:not(.eyebrow) { min-height: 3.2em; color: #99a4a5; font-size: .88rem; }
.prison-control-card label { margin-bottom: .3rem; color: #c5cbca; font-size: .8rem; }
.prison-inline-field { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .4rem; }
.prison-ledger { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.08); }
.prison-ledger h3 { margin-bottom: .8rem; }
.prison-ledger .table { margin-bottom: 0; }
.prison-schema-error { max-width: 760px; margin: 3rem auto; padding: 2rem; border: 1px solid rgba(212,77,82,.5); border-radius: 1rem; background: rgba(69,25,30,.52); }
.prison-schema-error p { margin-bottom: 0; }
@keyframes prison-light-flicker { 0%, 18%, 20%, 53%, 55%, 100% { opacity: 1; } 19%, 54% { opacity: .55; } }
@keyframes prison-character-breathe { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-3px); } }
@keyframes prison-bars-close { from { transform: translateX(78%); } to { transform: translateX(0); } }
@keyframes prison-lock-slam { from { opacity: 0; transform: scale(1.8) rotate(20deg); } to { opacity: 1; transform: scale(1) rotate(0); } }

@media (max-width: 991.98px) {
    .prison-hero { grid-template-columns: minmax(220px,.8fr) minmax(330px,1.2fr); }
    .prison-status-card { position: absolute; right: 0; bottom: 0; width: min(190px,35%); }
    .prison-owner-grid { grid-template-columns: 1fr 1fr; }
    .prison-control-card.is-danger { grid-column: 1 / -1; }
    .prison-inmate-card { grid-template-columns: auto repeat(2,minmax(0,1fr)); }
    .prison-inmate-reason { grid-column: 2 / 4; }
    .prison-inmate-time { grid-column: 3; grid-row: 1; text-align: right; }
}
@media (max-width: 767.98px) {
    .prison-arrest-report { grid-template-columns: 1fr; }
    .prison-arrest-scene { min-height: 235px; }
    .prison-hero { display: flex; min-height: auto; flex-direction: column; }
    .prison-hero-copy { order: 1; }
    .prison-scene { order: 2; min-height: 330px; }
    .prison-status-card { position: relative; right: auto; bottom: auto; order: 3; width: auto; margin-top: 0; }
    .prison-detention-card { grid-template-columns: auto minmax(0,1fr); }
    .prison-bail-box { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.1); border-left: 0; }
    .prison-unowned { grid-template-columns: auto minmax(0,1fr); }
    .prison-purchase-form { grid-column: 1 / -1; min-width: 0; }
    .prison-owner-stats, .prison-owner-grid { grid-template-columns: 1fr; }
    .prison-control-card.is-danger { grid-column: auto; }
    .prison-section-heading { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 479.98px) {
    .prison-shell { padding-right: .65rem; padding-left: .65rem; }
    .prison-hero-copy { padding: 1.1rem; }
    .prison-scene { min-height: 280px; }
    .prison-cell { inset: 56px 18px 20px; }
    .prison-detention-card { grid-template-columns: 1fr; }
    .prison-mugshot-number { width: 58px; height: 65px; }
    .prison-unowned { grid-template-columns: 1fr; }
    .prison-key-emblem { display: none; }
    .prison-inmate-card { grid-template-columns: auto minmax(0,1fr); }
    .prison-inmate-card > div, .prison-inmate-reason, .prison-inmate-time { grid-column: 2; grid-row: auto; text-align: left; }
    .prison-inmate-index { grid-row: 1 / 5; align-self: start; padding-top: .2rem; }
    .prison-inline-field { grid-template-columns: 1fr; }
    .prison-release-banner { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
    .prison-lamp i, .prison-character-window, .prison-hero.is-locked .prison-bars, .prison-hero.is-locked .prison-lock,
    .prison-arrest-scene::after, .prison-arrest-scene-label i { animation: none; }
    .prison-bars, .prison-lock, .prison-inmate-card { transition: none; }
}

/* Furt fictiv: patru locații, trei finaluri animate și aceeași interfață întunecată a jocului. */
.theft-shell { max-width: 1180px; }
.theft-hero { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 22px; align-items: center; padding: 28px; overflow: hidden; border: 1px solid rgba(222,184,104,.27); border-radius: 22px; background: radial-gradient(ellipse at 9% 10%, rgba(175,74,49,.2), transparent 46%), linear-gradient(125deg,#1b2328,#12191e 58%,#27211b); box-shadow: 0 22px 60px rgba(0,0,0,.25); }
.theft-hero::after { position: absolute; right: 250px; bottom: -120px; width: 290px; height: 290px; border: 1px solid rgba(244,205,125,.08); border-radius: 50%; box-shadow: 0 0 0 28px rgba(244,205,125,.025),0 0 0 60px rgba(244,205,125,.02); content: ""; pointer-events: none; }
.theft-hero-icon { display: grid; width: 76px; height: 76px; place-items: center; border: 1px solid rgba(239,191,103,.46); border-radius: 19px; background: linear-gradient(145deg,#573b2a,#302923); color: #f2cc78; box-shadow: inset 0 0 25px rgba(240,187,93,.12); }
.theft-hero-icon svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.theft-hero-copy, .theft-result-copy, .theft-option-copy { min-width: 0; }
.theft-hero-copy h1 { margin: 0 0 7px; color: #f7e9c8; font-size: clamp(2rem,4vw,3rem); font-weight: 800; letter-spacing: -.04em; }
.theft-hero-copy p:last-child { max-width: 650px; margin: 0; color: #c6c8c1; }
.theft-hero-rules { z-index: 1; min-width: 170px; padding: 14px 17px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(0,0,0,.23); text-align: right; }
.theft-hero-rules span, .theft-hero-rules small { display: block; color: #b8bcb7; font-size: .77rem; }
.theft-hero-rules strong { display: block; color: #f3d082; font-size: 1.35rem; }
.theft-hero-rules small { margin-top: 3px; }
.theft-options { margin-top: 30px; }
.theft-option-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.theft-option { display: grid; grid-template-columns: minmax(0,1fr) 205px; min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 17px; background: linear-gradient(135deg,rgba(31,39,42,.97),rgba(21,27,31,.97)); box-shadow: 0 14px 34px rgba(0,0,0,.18); }
.theft-option-scene { position: relative; grid-column: 1/-1; height: 152px; overflow: hidden; background: linear-gradient(145deg,#3b4140,#222b2c); }
.theft-option-scene::before, .theft-option-scene::after { position: absolute; right: -8%; bottom: -60px; width: 68%; height: 130px; border: 1px solid rgba(242,205,136,.22); border-radius: 50%; content: ""; transform: rotate(-12deg); }
.theft-option-scene::after { right: 22%; bottom: -78px; width: 55%; opacity: .55; }
.theft-option-scene > span { position: absolute; top: 13px; left: 16px; z-index: 1; color: rgba(244,223,177,.78); font-size: .65rem; font-weight: 800; letter-spacing: .17em; }
.theft-option-scene > svg { position: absolute; right: 19px; bottom: 13px; z-index: 1; width: 74px; height: 74px; fill: none; stroke: rgba(247,217,153,.86); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.1; filter: drop-shadow(0 3px 9px rgba(0,0,0,.4)); }
.theft-option-scene > i { position: absolute; bottom: 0; width: 9px; height: 46px; background: rgba(241,205,137,.18); transform: skew(-16deg); }
.theft-option-scene > i:nth-of-type(1) { right: 56%; height: 34px; }.theft-option-scene > i:nth-of-type(2) { right: 38%; height: 54px; }.theft-option-scene > i:nth-of-type(3) { right: 17%; height: 40px; }
.theft-option-train .theft-option-scene { background: linear-gradient(180deg,#334756 0,#425458 66%,#34383a 67%); }
.theft-option-train .theft-option-scene::before { right: -5%; bottom: -22px; width: 85%; height: 73px; border: 8px solid #a6a9a0; border-bottom-width: 14px; border-radius: 13px 13px 0 0; background: repeating-linear-gradient(90deg,#293b45 0 31px,#84918b 32px 35px,#293b45 36px 67px); }
.theft-option-restaurant .theft-option-scene { background: linear-gradient(160deg,#613a2d,#342525 72%); }
.theft-option-restaurant .theft-option-scene::before { right: 12%; bottom: -19px; width: 47%; height: 56px; border: 0; border-radius: 8px 8px 0 0; background: repeating-radial-gradient(ellipse at 50% 0, #c7945c 0 7px,#593728 8px 25px); transform: none; }
.theft-option-bookstore .theft-option-scene { background: linear-gradient(135deg,#47564a,#273632 75%); }
.theft-option-bookstore .theft-option-scene::before { right: 8%; bottom: 7px; width: 57%; height: 86px; border: 7px solid #725a3f; border-radius: 3px; background: repeating-linear-gradient(90deg,#a65c47 0 15px,#d5b46c 16px 30px,#577488 31px 45px,#76875b 46px 61px); box-shadow: 0 -34px 0 -7px #725a3f,0 -68px 0 -7px #725a3f; transform: none; }
.theft-option-supermarket .theft-option-scene { background: linear-gradient(180deg,#c4cac4 0,#697773 69%,#313a3a 70%); }
.theft-option-supermarket .theft-option-scene::before { right: 18%; bottom: -2px; width: 58%; height: 91px; border: 0; border-radius: 7px 7px 0 0; background: repeating-linear-gradient(90deg,#536159 0 21px,#c55e4c 22px 33px,#d2ad5f 34px 44px,#63846d 45px 56px,#526159 57px 76px); transform: none; }
.theft-option-copy { padding: 18px 19px 15px; }
.theft-option-copy .eyebrow { margin-bottom: 4px; color: #e9c778; font-size: .68rem; }
.theft-option-copy h3 { margin: 0 0 7px; color: #f1e7d0; font-size: 1.1rem; font-weight: 750; }
.theft-option-copy > p:not(.eyebrow) { min-height: 44px; margin: 0; color: #b9c0bc; font-size: .82rem; }
.theft-option-facts { display: flex; gap: 22px; margin-top: 14px; }
.theft-option-facts span { display: flex; flex-direction: column; gap: 2px; }
.theft-option-facts small { color: #9da8a3; font-size: .68rem; }
.theft-option-facts strong { color: #f1d18a; font-size: .9rem; }
.theft-option form { display: flex; align-items: end; padding: 0 14px 14px 0; }
.theft-option form .btn { display: inline-flex; width: 100%; min-height: 44px; align-items: center; justify-content: center; gap: 8px; padding: .55rem .65rem; font-size: .8rem; }
.theft-option form .btn svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.theft-option form .btn:disabled { opacity: .47; cursor: not-allowed; }
.theft-cooldown { margin-top: 18px; }
.theft-readiness, .theft-fiction-note { display: flex; gap: 10px; align-items: center; margin-top: 17px; padding: 13px 16px; border: 1px solid rgba(231,185,97,.19); border-radius: 12px; background: rgba(43,37,27,.55); color: #d9cba8; font-size: .86rem; }
.theft-readiness svg { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: #e3ba67; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.theft-fiction-note { display: block; border-color: rgba(255,255,255,.08); background: rgba(0,0,0,.15); color: #9ca7a1; font-size: .78rem; text-align: center; }
.theft-schema-error { margin-top: 24px; padding: 24px; border: 1px solid rgba(245,174,92,.4); border-radius: 15px; background: rgba(74,42,24,.35); }
.theft-schema-error h2 { color: #f2d18c; font-size: 1.25rem; }
.theft-result { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(280px,.85fr); margin-top: 22px; overflow: hidden; border: 1px solid rgba(221,183,106,.3); border-radius: 19px; background: #171e22; box-shadow: 0 20px 52px rgba(0,0,0,.27); }
.theft-cinematic { position: relative; display: flex; flex-direction: column; align-self: start; min-width: 0; overflow: hidden; background: #1b272b; }
.theft-cinematic canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.theft-cinematic canvas { max-width: 100%; object-fit: contain; }
.theft-cinematic-location, .theft-cinematic-caption { position: static; display: block; padding: 12px 16px; color: #ead8ac; font-size: .78rem; font-weight: 750; line-height: 1.5; overflow-wrap: anywhere; }
.theft-cinematic-location { background: #111e23; letter-spacing: .04em; }
.theft-cinematic-caption { min-height: 4.5em; color: #e6ebe2; font-size: .9rem; font-weight: 500; }
.theft-replay { align-self: start; min-height: 44px; margin: 0 16px 14px; padding: 8px 14px; border: 1px solid #a3b7ac; border-radius: 8px; background: #273d39; color: #f1ead4; font: inherit; font-size: .85rem; cursor: pointer; }
.theft-replay:focus-visible { outline: 3px solid #f0d080; outline-offset: 3px; }
.theft-replay:disabled { opacity: .55; cursor: wait; }
.theft-result-copy { align-self: center; padding: clamp(20px,3.2vw,34px); }
.theft-result-copy .eyebrow { margin: 0 0 7px; color: #e8c477; font-size: .7rem; font-weight: 800; letter-spacing: .13em; }
.theft-result-copy h2 { margin: 0 0 10px; color: #f2e7cf; font-size: clamp(1.2rem,2.4vw,1.65rem); font-weight: 780; line-height: 1.25; }
.theft-result-copy > p:not(.eyebrow) { color: #b8c0ba; font-size: .85rem; }
.theft-impact-summary { margin-top: 16px; padding: 12px; border: 1px solid rgba(237,195,106,.24); border-radius: 12px; background: linear-gradient(135deg,rgba(77,57,31,.32),rgba(0,0,0,.17)); }
.theft-impact-summary > .eyebrow { margin-bottom: 8px; color: #f0cf82; font-size: .65rem; }
.theft-result-values { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 17px; }
.theft-impact-summary .theft-result-values { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-top: 0; }
.theft-result-values > div { display: grid; gap: 3px; min-width: 100px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: rgba(255,255,255,.035); }
.theft-impact-summary .theft-result-values > div { min-width: 0; padding: 9px 8px; }
.theft-result-values span { color: #aab4ae; font-size: .69rem; }.theft-result-values strong { color: #f1d284; font-size: .95rem; }
.theft-result-failed .theft-result-values strong { color: #e6b0a2; }
.theft-result-arrested .theft-result-values strong { color: #e08e81; }
.prison-theft-cinematic { width: 100%; height: auto; min-height: 0; }
.prison-theft-cinematic canvas { width: 100%; height: auto; min-height: 0; object-fit: contain; }
.prison-arrest-report:has([data-theft-scene]) .prison-arrest-scene { min-height: 0; }
.prison-arrest-report:has([data-theft-scene]) .prison-arrest-scene::after { display: none; }
.theft-prison-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 15px 0; }
.theft-prison-facts span { padding: 8px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: rgba(0,0,0,.18); color: #bac1bb; font-size: .76rem; }
.theft-prison-facts strong { color: #efd28e; }
@media (max-width: 1000px) {
    .theft-hero { grid-template-columns: auto minmax(0,1fr); }
    .theft-hero-rules { grid-column: 1/-1; text-align: left; }
    .theft-option-grid { grid-template-columns: 1fr; }
    .theft-option { grid-template-columns: minmax(0,1fr) 220px; }
    .theft-result { grid-template-columns: 1fr; }
    .theft-result-copy { padding: 21px; }
}
@media (max-width: 520px) {
    .theft-shell { padding-right: .7rem; padding-left: .7rem; }
    .theft-hero { gap: 13px; padding: 17px; border-radius: 16px; }
    .theft-hero-icon { width: 55px; height: 55px; border-radius: 14px; }
    .theft-hero-icon svg { width: 30px; height: 30px; }
    .theft-hero-copy h1 { font-size: 2rem; }
    .theft-option { grid-template-columns: minmax(0,1fr); }
    .theft-option-scene { height: 136px; }
    .theft-option-copy { padding: 15px 16px 12px; }
    .theft-option form { padding: 0 15px 15px; }
    .theft-option-copy > p:not(.eyebrow) { min-height: 0; }
    .theft-cinematic-location, .theft-cinematic-caption { max-width: none; padding: 10px 12px; font-size: .78rem; }
    .theft-cinematic-caption { font-size: .88rem; }
    .theft-impact-summary .theft-result-values { grid-template-columns: 1fr; }
    .theft-prison-facts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .theft-option, .theft-option form .btn { transition: none; }
}