body.games-body {
    --shadow-sm: 0 22px 48px rgba(74, 112, 167, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.72);
    --game-action-gradient: linear-gradient(135deg, #ff9f6e 0%, #ffc857 44%, #4ea8ff 100%);
    --game-surface-soft: color-mix(in srgb, var(--card-bg) 82%, #e8f7ff 18%);
    --game-kids-sky: #4ea8ff;
    --game-kids-mint: #40d6b4;
    --game-kids-sun: #ffc857;
    --game-kids-coral: #ff8b75;
    --game-kids-pink: #ff7eb3;
    --game-kids-violet: #8b7cf6;
    background:
        radial-gradient(circle at 84% 8%, rgba(78, 168, 255, 0.34), transparent 28%),
        radial-gradient(circle at 12% 18%, rgba(64, 214, 180, 0.18), transparent 25%),
        radial-gradient(circle at 12% 88%, rgba(44, 214, 190, 0.14), transparent 30%),
        radial-gradient(circle at 92% 84%, rgba(139, 124, 246, 0.16), transparent 28%),
        linear-gradient(135deg, #eefaff 0%, #f9fcff 50%, #f0f3ff 100%);
}

body.games-body:not(.game-admin-body) .games-shell {
    width: min(1420px, calc(100% - 36px));
}

body.games-body .loading-screen,
body.games-body .auth-overlay {
    background:
        radial-gradient(circle at 84% 10%, rgba(78, 168, 255, 0.26), transparent 28%),
        radial-gradient(circle at 12% 20%, rgba(64, 214, 180, 0.16), transparent 26%),
        radial-gradient(circle at 92% 86%, rgba(139, 124, 246, 0.14), transparent 28%),
        linear-gradient(135deg, #f1fbff 0%, #fbfdff 52%, #f1f4ff 100%);
}

.games-title,
.panel-head h2,
.games-hero h1 {
    color: var(--text-main);
}

.games-title {
    letter-spacing: -0.04em;
}

.games-topbar,
.games-hero,
.games-panel {
    border-color: rgba(111, 156, 206, 0.24);
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.82), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(249, 252, 255, 0.9));
}

.games-btn {
    background: var(--game-action-gradient);
    border-radius: 18px;
    box-shadow: 0 14px 28px rgba(255, 153, 93, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.games-btn-outline {
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.games-btn:hover,
.games-btn-outline:hover {
    filter: saturate(1.06);
    box-shadow: 0 16px 30px rgba(75, 126, 190, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.52);
}

.games-hero {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
}

.games-hero::before {
    content: "";
    position: absolute;
    inset: -34% -8% auto auto;
    width: 320px;
    height: 320px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 42% 42%, rgba(255, 255, 255, 0.9) 0 10%, transparent 11% 100%),
        conic-gradient(from 20deg, rgba(255, 126, 179, 0.24), rgba(139, 124, 246, 0.22), rgba(64, 214, 180, 0.28), rgba(78, 168, 255, 0.26), rgba(255, 139, 117, 0.18), rgba(255, 126, 179, 0.24));
    opacity: 0.92;
    pointer-events: none;
}

.games-hero > * {
    position: relative;
    z-index: 1;
}

.games-hero h1 {
    max-width: 760px;
    color: #123957;
    letter-spacing: -0.055em;
}

.games-hero p,
.games-subtitle,
.panel-head p,
.game-card p {
    color: #5d7891;
}

.hero-badge,
.game-chip,
.category-tab.active,
.acid-chip {
    letter-spacing: 0.01em;
}

.hero-badge,
.acid-chip,
.game-chip {
    border-color: rgba(85, 126, 178, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66);
}

.hero-badge:nth-child(1),
.game-chip:nth-child(1) {
    background: rgba(255, 234, 174, 0.9);
    color: #bd6a00;
}

.hero-badge:nth-child(2) {
    background: rgba(202, 247, 255, 0.9);
    color: #087a9d;
}

.hero-badge:nth-child(3) {
    background: rgba(226, 224, 255, 0.94);
    color: #5644d4;
}

.hero-badge:nth-child(4) {
    background: rgba(255, 218, 233, 0.94);
    color: #c03672;
}

.hero-badge::before {
    content: "GO";
    font-size: 0.68rem;
    letter-spacing: 0;
}

.hero-badge:nth-child(1)::before {
    content: "MATH";
}

.hero-badge:nth-child(2)::before {
    content: "RAIN";
}

.hero-badge:nth-child(3)::before {
    content: "RUN";
}

.hero-badge:nth-child(4)::before {
    content: "ABC";
    font-size: 0.7rem;
    letter-spacing: 0;
}

.category-tab {
    min-height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.74);
}

.category-tab.active {
    color: #fff;
    background: linear-gradient(135deg, var(--game-kids-coral), var(--game-kids-violet) 52%, var(--game-kids-sky));
    box-shadow: 0 12px 24px rgba(94, 124, 246, 0.18);
}

.hero-kpi {
    background:
        radial-gradient(circle at top right, rgba(78, 168, 255, 0.16), transparent 42%),
        radial-gradient(circle at bottom left, rgba(64, 214, 180, 0.12), transparent 46%),
        rgba(255, 255, 255, 0.72);
    border-color: rgba(92, 136, 190, 0.18);
}

.hero-kpi strong {
    color: #163f66;
}

.game-card {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    border-color: rgba(94, 139, 196, 0.2);
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.8), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(250, 253, 255, 0.88));
    box-shadow: 0 18px 36px rgba(70, 112, 166, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.72);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.game-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 8px;
    background: linear-gradient(90deg, var(--game-kids-coral), var(--game-kids-sun), var(--game-kids-mint), var(--game-kids-sky));
}

.game-card:hover {
    transform: translateY(-4px) rotate(-0.2deg);
    border-color: rgba(78, 168, 255, 0.34);
    box-shadow: 0 24px 46px rgba(70, 112, 166, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.game-card .icon {
    width: 62px;
    height: 62px;
    border-radius: 22px;
    color: #17405f;
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.96), transparent 34%),
        linear-gradient(135deg, rgba(255, 200, 87, 0.74), rgba(255, 139, 117, 0.62));
    box-shadow: 0 12px 22px rgba(255, 151, 99, 0.22);
}

.game-card:nth-child(2n) .icon {
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.96), transparent 34%),
        linear-gradient(135deg, rgba(64, 214, 180, 0.72), rgba(78, 168, 255, 0.62));
    box-shadow: 0 12px 22px rgba(64, 214, 180, 0.18);
}

.game-card:nth-child(3n) .icon {
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.96), transparent 34%),
        linear-gradient(135deg, rgba(139, 124, 246, 0.64), rgba(255, 126, 179, 0.6));
    box-shadow: 0 12px 22px rgba(139, 124, 246, 0.16);
}

.game-card h3 {
    color: #153b5b;
    letter-spacing: -0.02em;
}

.game-auth-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 18px;
    text-align: left;
}

.game-auth-panel {
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 18px;
    background: var(--game-surface-soft);
}

.game-auth-panel h3 {
    margin: 0 0 8px;
    font-size: 1rem;
}

.game-auth-panel p {
    margin: 0 0 12px;
    color: var(--text-sub);
    line-height: 1.55;
}

.game-auth-form {
    display: grid;
    gap: 10px;
}

.game-auth-form label,
.game-auth-panel label {
    display: grid;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-main);
}

.game-auth-form input,
.game-auth-form select,
.game-auth-panel input,
.game-auth-panel select {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px 12px;
    font-size: 0.98rem;
    color: var(--text-main);
    background: var(--input-bg);
}

.game-auth-status {
    min-height: 20px;
    font-size: 0.9rem;
    color: var(--text-sub);
}

.game-auth-status.error {
    color: var(--danger, #dc2626);
}

.game-session-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.games-actions #btnBackHome,
.games-actions #btnOpenHub,
.games-actions #btnBackHub {
    order: 1;
}

.games-actions #btnTeacherLogin,
.games-actions #btnGoAdmin,
.games-actions #btnGoDashboard {
    order: 2;
    background: var(--game-action-gradient);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 14px 28px var(--primary-soft, rgba(37, 99, 235, 0.18));
}

.games-actions #btnSignOut {
    order: 3;
}

.games-actions #btnRefresh,
.games-actions #btnRefreshPage {
    order: 4;
    background: var(--game-surface-soft);
    color: var(--text-main);
    box-shadow: none;
}

.game-session-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--game-surface-soft);
    border: 1px solid var(--border);
    font-weight: 700;
    color: var(--text-main);
}

.game-inline-note,
.game-auth-hint,
.casual-share-copy {
    margin-top: 8px;
    color: var(--text-sub);
    line-height: 1.55;
    word-break: break-word;
}

#runtimeFailureTrail {
    font-size: 0.88rem;
}

#diagnosticStatus {
    margin-top: 10px;
}

.moderation-warning {
    margin-top: 14px;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid var(--warning-soft, rgba(185, 28, 28, 0.16));
    background: color-mix(in srgb, var(--warning-soft, rgba(255, 245, 238, 0.96)) 52%, var(--card-bg));
    color: var(--text-main);
}

.moderation-warning strong {
    display: block;
    margin-bottom: 8px;
    color: var(--warning, #991b1b);
}

.moderation-warning p {
    margin: 0;
    line-height: 1.6;
}

.game-error-box {
    border: 1px dashed var(--danger-soft, rgba(220, 38, 38, 0.28));
    border-radius: 18px;
    padding: 16px;
    background: color-mix(in srgb, var(--danger-soft, rgba(254, 242, 242, 0.84)) 52%, var(--card-bg));
    color: var(--danger, #991b1b);
    line-height: 1.55;
}

.game-auth-card-wide {
    width: min(760px, 100%);
}

.game-auth-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.auth-card .game-auth-actions {
    justify-content: flex-start;
}

.panel-subsection {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.list-empty {
    border: 1px dashed var(--border);
    border-radius: 24px;
    padding: 18px;
    background: var(--game-surface-soft);
    color: var(--text-sub);
}

.list-empty strong {
    display: block;
    margin-bottom: 8px;
    color: var(--text-main);
}

.empty-copy {
    margin: 0;
}

.acid-session-card {
    width: 100%;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 18px;
    background: var(--game-surface-soft);
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.acid-session-card:hover,
.acid-session-card.is-selected,
.catalog-item:hover,
.catalog-item.is-selected {
    border-color: var(--primary, rgba(46, 128, 183, 0.34));
    box-shadow: 0 18px 28px var(--primary-soft, rgba(37, 99, 235, 0.12));
    transform: translateY(-1px);
}

.casual-share-card {
    cursor: default;
    background: color-mix(in srgb, var(--accent-soft, rgba(215, 255, 244, 0.86)) 28%, var(--card-bg));
}

.casual-share-card.is-muted {
    opacity: 0.72;
}

.casual-share-head,
.acid-session-top,
.session-detail-head,
.detail-table-head,
.detail-table-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.acid-session-title,
.share-detail-card h3,
.casual-share-card h3 {
    margin: 0;
    font-size: 1rem;
}

.acid-session-sub,
.detail-meta {
    margin-top: 6px;
    color: var(--text-sub);
    font-size: 0.9rem;
    line-height: 1.5;
}

.acid-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
}

.acid-chip.live {
    color: var(--success, #0f766e);
    border-color: var(--success-soft, rgba(15, 118, 110, 0.18));
    background: var(--success-soft, rgba(15, 118, 110, 0.08));
}

.acid-chip.stopped {
    color: var(--danger, #b91c1c);
    border-color: var(--danger-soft, rgba(185, 28, 28, 0.18));
    background: var(--danger-soft, rgba(185, 28, 28, 0.08));
}

.share-detail-card {
    border: 1px solid var(--border);
    border-radius: 24px;
    background: var(--game-surface-soft);
    padding: 20px;
}

.detail-table {
    margin-top: 14px;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.detail-table-blocked {
    margin-top: 18px;
}

.detail-table-head,
.detail-table-row {
    padding: 12px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.detail-table-head {
    font-size: 0.84rem;
    color: var(--text-sub);
    font-weight: 700;
}

.detail-table-row strong {
    font-size: 1rem;
}

.detail-table-row-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}

.detail-table-row-main small {
    color: var(--text-sub);
    font-size: 0.8rem;
    word-break: break-all;
}

.detail-rank-delete {
    flex: 0 0 auto;
    align-self: center;
}