* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    color: #1f2a44;
    background: radial-gradient(circle at top left, #fff6b8 0, #fff6b8 20%, transparent 42%), radial-gradient(circle at top right, #b9ecff 0, #b9ecff 18%, transparent 40%), linear-gradient(135deg, #f8fbff 0%, #fff7ec 50%, #f6efff 100%);
}

button,
input,
select,
textarea {
    font-family: inherit;
}

.page-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-header {
    width: min(1180px, calc(100% - 32px));
    margin: 18px auto 0;
    padding: 14px 18px;
    border-radius: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 16px 40px rgba(31, 42, 68, 0.12);
    backdrop-filter: blur(12px);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #1f2a44;
    text-decoration: none;
    font-weight: 900;
    letter-spacing: -0.4px;
}

.brand-icon {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: #fff;
    font-size: 24px;
    background: linear-gradient(135deg, #7057ff, #00b7ff);
    box-shadow: 0 10px 20px rgba(112, 87, 255, 0.28);
}

.brand-text {
    font-size: 22px;
}

.main-menu {
    display: flex;
    align-items: center;
    gap: 8px;
}

.main-menu a {
    color: #31405f;
    text-decoration: none;
    font-weight: 800;
    padding: 11px 14px;
    border-radius: 999px;
    transition: 0.2s ease;
}

.main-menu a:hover,
.main-menu a:focus {
    color: #fff;
    background: #7057ff;
    outline: none;
}

.menu-button {
    display: none;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 15px;
    color: #fff;
    font-size: 22px;
    font-weight: 900;
    background: #7057ff;
    cursor: pointer;
}

.main-content {
    width: min(1180px, calc(100% - 32px));
    margin: 24px auto;
    flex: 1;
}

.hero {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 24px;
    align-items: stretch;
}

.hero-card,
.panel,
.game-card,
.info-card {
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 48px rgba(31, 42, 68, 0.13);
}

.hero-card {
    padding: 46px;
    overflow: hidden;
    position: relative;
}

.hero-card::after {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    right: -60px;
    bottom: -70px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 199, 44, 0.65), rgba(255, 112, 150, 0.58));
}

.kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border-radius: 999px;
    color: #614500;
    background: #fff1af;
    font-size: 14px;
    font-weight: 900;
}

.hero h1,
.page-title h1 {
    margin: 18px 0 14px;
    color: #1f2a44;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.02;
    letter-spacing: -1.8px;
}

.hero p,
.page-title p,
.info-card p,
.panel p {
    color: #52617d;
    font-size: 18px;
    line-height: 1.7;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.btn-primary,
.btn-secondary,
.asp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 13px 19px;
    border: 0;
    border-radius: 999px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    transition: 0.2s ease;
}

.btn-primary,
.asp-button {
    color: #fff;
    background: linear-gradient(135deg, #7057ff, #00a6ff);
    box-shadow: 0 12px 24px rgba(0, 128, 255, 0.25);
}

.btn-secondary {
    color: #2e3c59;
    background: #eef4ff;
}

.btn-primary:hover,
.btn-secondary:hover,
.asp-button:hover {
    transform: translateY(-2px);
}

.hero-side {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.stat-card {
    min-height: 140px;
    padding: 28px;
    border-radius: 30px;
    color: #fff;
    background: linear-gradient(135deg, #ff8a3d, #ff4f87);
    box-shadow: 0 18px 42px rgba(255, 93, 93, 0.22);
}

.stat-card.alt {
    background: linear-gradient(135deg, #18c792, #00a6ff);
    box-shadow: 0 18px 42px rgba(0, 166, 255, 0.2);
}

.stat-number {
    display: block;
    font-size: 48px;
    font-weight: 900;
    line-height: 1;
}

.stat-text {
    display: block;
    margin-top: 9px;
    font-size: 17px;
    font-weight: 800;
}

.section-heading {
    margin: 38px 0 18px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
}

.section-heading h2,
.page-title h1 {
    margin: 0;
}

.section-heading h2 {
    color: #1f2a44;
    font-size: 34px;
    letter-spacing: -0.8px;
}

.games-grid,
.info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.game-card,
.info-card,
.panel {
    padding: 24px;
}

.game-card {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
}

.game-card::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(112, 87, 255, 0.13);
}

.game-icon {
    width: 68px;
    height: 68px;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 34px;
    font-weight: 900;
    background: linear-gradient(135deg, #7057ff, #00b7ff);
}

.game-card h3,
.info-card h3,
.panel h2 {
    margin: 18px 0 8px;
    color: #1f2a44;
    font-size: 24px;
}

.game-card p {
    color: #52617d;
    line-height: 1.65;
}


.game-card-media .game-thumb {
    width: 100%;
    height: 142px;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: 0 16px 32px rgba(29, 43, 83, 0.16);
    background: #eef4ff;
}

.game-card-media .game-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.game-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
}

.tag {
    padding: 7px 10px;
    border-radius: 999px;
    color: #31405f;
    background: #eef4ff;
    font-size: 13px;
    font-weight: 800;
}

.page-title {
    padding: 34px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 18px 48px rgba(31, 42, 68, 0.13);
}

.site-footer {
    width: min(1180px, calc(100% - 32px));
    margin: 10px auto 18px;
    padding: 20px 22px;
    border-radius: 26px;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    color: #52617d;
    background: rgba(255, 255, 255, 0.82);
}

.site-footer strong,
.site-footer span {
    display: block;
}

.footer-links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.footer-links a {
    color: #7057ff;
    font-weight: 900;
    text-decoration: none;
}

.text-list {
    margin: 12px 0 0;
    padding-left: 22px;
    color: #52617d;
    line-height: 1.8;
    font-size: 17px;
}

@media (max-width: 900px) {
    .site-header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .menu-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .main-menu {
        width: 100%;
        display: none;
        flex-direction: column;
        align-items: stretch;
    }

    .main-menu.is-open {
        display: flex;
    }

    .main-menu a {
        background: #f2f6ff;
    }

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

    .games-grid,
    .info-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 620px) {
    .site-header,
    .main-content,
    .site-footer {
        width: calc(100% - 20px);
    }

    .brand-text {
        font-size: 18px;
    }

    .hero-card,
    .page-title {
        padding: 28px;
    }

    .games-grid,
    .info-grid {
        grid-template-columns: 1fr;
    }

    .site-footer {
        flex-direction: column;
    }
}

.ttt-title {
    margin-bottom: 22px;
}

.ttt-layout {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.ttt-control-panel {
    position: sticky;
    top: 18px;
}

.form-group {
    margin-top: 18px;
}

.form-label {
    display: block;
    margin-bottom: 9px;
    color: #1f2a44;
    font-size: 15px;
    font-weight: 900;
}

.choice-list table {
    width: 100%;
}

.choice-list td {
    display: block;
    padding: 8px 0;
    color: #52617d;
    font-weight: 800;
}

.choice-list input {
    margin-right: 8px;
    transform: scale(1.15);
}

.select-input {
    width: 100%;
    min-height: 46px;
    padding: 10px 13px;
    border: 0;
    border-radius: 16px;
    color: #1f2a44;
    background: #eef4ff;
    font-size: 16px;
    font-weight: 800;
    outline: none;
}

.select-input:focus {
    box-shadow: 0 0 0 4px rgba(112, 87, 255, 0.16);
}

.ttt-score-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 22px;
}

.ttt-score-card {
    padding: 15px 16px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #f3f7ff;
}

.ttt-score-card span {
    color: #52617d;
    font-weight: 900;
}

.ttt-score-card strong {
    min-width: 44px;
    height: 44px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #7057ff, #00a6ff);
    font-size: 22px;
}

.ttt-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 22px;
}

.asp-button-light {
    width: 100%;
    color: #2e3c59;
    background: #eef4ff;
    box-shadow: none;
}

.small-note {
    margin: 18px 0 0;
    color: #65718b;
    font-size: 14px;
    line-height: 1.6;
}

.ttt-game-panel {
    min-height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.ttt-status-box {
    width: min(520px, 100%);
    padding: 16px 18px;
    border-radius: 22px;
    text-align: center;
    background: #fff8d9;
}

.ttt-status-text {
    color: #1f2a44;
    font-size: 22px;
    font-weight: 900;
}

.ttt-board {
    width: min(520px, 100%);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.ttt-cell {
    aspect-ratio: 1 / 1;
    min-height: 120px;
    border: 0;
    border-radius: 30px;
    color: #1f2a44;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(31, 42, 68, 0.13);
    font-size: clamp(48px, 8vw, 92px);
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    transition: 0.18s ease;
}

.ttt-cell:hover:enabled,
.ttt-cell:focus:enabled {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 18px 38px rgba(31, 42, 68, 0.18);
    outline: none;
}

.ttt-cell.is-x {
    color: #7057ff;
    background: #f3f0ff;
}

.ttt-cell.is-o {
    color: #0099d8;
    background: #eaf8ff;
}

.ttt-cell.is-win {
    color: #fff;
    background: linear-gradient(135deg, #18c792, #00a6ff);
    box-shadow: 0 20px 42px rgba(24, 199, 146, 0.26);
}

.ttt-cell.is-locked {
    cursor: default;
}

.ttt-cell:disabled {
    opacity: 1;
}

.ttt-hint {
    width: min(520px, 100%);
    display: block;
    color: #52617d;
    text-align: center;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.6;
}

@media (max-width: 980px) {
    .ttt-layout {
        grid-template-columns: 1fr;
    }

    .ttt-control-panel {
        position: static;
    }

    .ttt-score-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 620px) {
    .ttt-game-panel {
        min-height: auto;
        padding: 18px;
    }

    .ttt-board {
        gap: 8px;
    }

    .ttt-cell {
        min-height: 86px;
        border-radius: 22px;
    }

    .ttt-score-grid {
        grid-template-columns: 1fr;
    }
}

.memory-title {
    margin-bottom: 22px;
}

.memory-layout {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.memory-control-panel {
    position: sticky;
    top: 18px;
}

.small-note {
    color: #52617d;
    font-size: 15px;
    line-height: 1.7;
    font-weight: 700;
}

.memory-score-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 22px;
}

.memory-score-card {
    padding: 15px 16px;
    border-radius: 22px;
    background: #f3f7ff;
}

.memory-score-card span {
    display: block;
    color: #52617d;
    font-size: 13px;
    font-weight: 900;
}

.memory-score-card strong {
    display: block;
    margin-top: 4px;
    color: #1f2a44;
    font-size: 25px;
    font-weight: 900;
}

.memory-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.asp-button-light {
    box-shadow: none;
}

.memory-game-panel {
    min-height: 620px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.memory-status-box {
    width: min(620px, 100%);
    padding: 14px 18px;
    border-radius: 20px;
    text-align: center;
    background: #fff5d6;
}

.memory-status-text {
    color: #684800;
    font-size: 18px;
    font-weight: 900;
}

.memory-board {
    width: min(620px, 100%);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.memory-card {
    aspect-ratio: 1 / 1;
    min-height: 110px;
    border: 0;
    border-radius: 28px;
    color: #ffffff;
    background: linear-gradient(135deg, #7057ff, #00a6ff);
    box-shadow: 0 14px 30px rgba(31, 42, 68, 0.13);
    font-size: clamp(34px, 6vw, 62px);
    font-weight: 900;
    cursor: pointer;
    transition: 0.18s ease;
}

.memory-card:hover:enabled,
.memory-card:focus:enabled {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 18px 38px rgba(31, 42, 68, 0.18);
    outline: none;
}

.memory-card.is-revealed {
    color: #1f2a44;
    background: #ffffff;
}

.memory-card.is-matched {
    color: #ffffff;
    background: linear-gradient(135deg, #18c792, #00a6ff);
    cursor: default;
}

.memory-card:disabled {
    opacity: 1;
}

@media (max-width: 980px) {
    .memory-layout {
        grid-template-columns: 1fr;
    }

    .memory-control-panel {
        position: static;
    }
}

@media (max-width: 620px) {
    .memory-game-panel {
        min-height: auto;
        padding: 18px;
    }

    .memory-board {
        gap: 8px;
    }

    .memory-card {
        min-height: 72px;
        border-radius: 20px;
    }

    .memory-score-grid {
        grid-template-columns: 1fr;
    }
}

.sudoku-title {
    margin-bottom: 22px;
}

.sudoku-layout {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.sudoku-control-panel {
    position: sticky;
    top: 18px;
}

.form-group {
    display: grid;
    gap: 8px;
    margin-top: 18px;
}

.form-group label {
    color: #1f2a44;
    font-size: 15px;
    font-weight: 900;
}

.select-input {
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border: 2px solid #dfe6ff;
    border-radius: 16px;
    color: #1f2a44;
    background: #ffffff;
    font-size: 16px;
    font-weight: 800;
}

.sudoku-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.sudoku-score-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 22px;
}

.sudoku-score-card {
    padding: 15px 16px;
    border-radius: 22px;
    background: #f3f7ff;
}

.sudoku-score-card span {
    display: block;
    color: #52617d;
    font-size: 13px;
    font-weight: 900;
}

.sudoku-score-card strong {
    display: block;
    margin-top: 4px;
    color: #1f2a44;
    font-size: 22px;
    font-weight: 900;
}

.sudoku-game-panel {
    min-height: 680px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.sudoku-status-box {
    width: min(680px, 100%);
    padding: 14px 18px;
    border-radius: 20px;
    text-align: center;
    background: #fff5d6;
}

.sudoku-status-text {
    color: #684800;
    font-size: 18px;
    font-weight: 900;
}

.sudoku-board {
    width: min(680px, 100%);
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 4px;
    padding: 14px;
    border-radius: 28px;
    background: #1f2a44;
    box-shadow: 0 20px 46px rgba(31, 42, 68, 0.18);
}

.sudoku-cell {
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 48px;
    border: 0;
    border-radius: 12px;
    color: #1f2a44;
    background: #ffffff;
    text-align: center;
    font-size: clamp(20px, 3vw, 34px);
    font-weight: 900;
    box-shadow: inset 0 0 0 1px rgba(31, 42, 68, 0.08);
    transition: 0.15s ease;
}

.sudoku-cell:focus {
    outline: 4px solid rgba(112, 87, 255, 0.22);
    transform: scale(1.03);
}

.sudoku-cell.sudoku-box-right {
    margin-right: 6px;
}

.sudoku-cell.sudoku-box-bottom {
    margin-bottom: 6px;
}

.sudoku-given {
    color: #ffffff;
    background: #7057ff;
}

.sudoku-correct {
    color: #ffffff;
    background: #18c792;
}

.sudoku-wrong {
    color: #ffffff;
    background: #ff5a76;
}

.sudoku-hint {
    color: #684800;
    background: #ffdf63;
}

.sudoku-locked {
    opacity: 0.96;
}

.sudoku-hint-text {
    margin: 0;
    color: #52617d;
    font-size: 15px;
    font-weight: 800;
    text-align: center;
}

@media (max-width: 980px) {
    .sudoku-layout {
        grid-template-columns: 1fr;
    }

    .sudoku-control-panel {
        position: static;
    }
}

@media (max-width: 620px) {
    .sudoku-game-panel {
        min-height: auto;
        padding: 18px;
    }

    .sudoku-board {
        gap: 3px;
        padding: 8px;
        border-radius: 18px;
    }

    .sudoku-cell {
        min-height: 34px;
        border-radius: 8px;
    }

    .sudoku-score-grid {
        grid-template-columns: 1fr;
    }
}


.typing-title {
    margin-bottom: 22px;
}

.typing-layout {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.typing-control-panel {
    position: sticky;
    top: 18px;
}

.typing-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 22px;
}

.typing-score-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 22px;
}

.typing-score-card {
    padding: 15px 16px;
    border-radius: 22px;
    background: #f3f7ff;
}

.typing-score-card span {
    display: block;
    color: #52617d;
    font-size: 13px;
    font-weight: 900;
}

.typing-score-card strong {
    display: block;
    margin-top: 4px;
    color: #1f2a44;
    font-size: 22px;
    font-weight: 900;
}

.typing-game-panel {
    min-height: 620px;
}

.typing-empty-state,
.typing-game-content {
    min-height: 560px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
}

.typing-empty-state {
    align-items: center;
    text-align: center;
}

.typing-empty-state h2 {
    margin: 0;
    color: #1f2a44;
    font-size: clamp(28px, 4vw, 48px);
}

.typing-empty-state p {
    margin: 0;
    color: #52617d;
    font-size: 18px;
    font-weight: 800;
}

.typing-empty-icon {
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 34px;
    background: linear-gradient(135deg, #7057ff, #00a6ff);
    box-shadow: 0 18px 36px rgba(0, 128, 255, 0.22);
    font-size: 52px;
}

.typing-topbar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.typing-topbar > div,
.typing-target-box,
.typing-input-box,
.typing-status-box {
    padding: 16px;
    border-radius: 22px;
    background: #f3f7ff;
}

.typing-label {
    display: block;
    margin-bottom: 8px;
    color: #52617d;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.typing-topbar strong {
    color: #1f2a44;
    font-size: 24px;
    font-weight: 900;
}

.typing-target-text {
    color: #1f2a44;
    font-size: clamp(22px, 3vw, 34px);
    font-weight: 900;
    line-height: 1.45;
}

.typing-input {
    width: 100%;
    min-height: 190px;
    resize: vertical;
    padding: 18px;
    border: 3px solid #dfe6ff;
    border-radius: 22px;
    color: #1f2a44;
    background: #ffffff;
    font-size: clamp(20px, 2.4vw, 30px);
    font-weight: 800;
    line-height: 1.45;
    outline: none;
}

.typing-input:focus {
    border-color: #7057ff;
    box-shadow: 0 0 0 5px rgba(112, 87, 255, 0.16);
}

.typing-input:disabled {
    background: #eef4ff;
    color: #52617d;
}

.typing-status-box {
    text-align: center;
    background: #fff5d6;
}

.typing-status-text {
    color: #684800;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.5;
}

@media (max-width: 980px) {
    .typing-layout {
        grid-template-columns: 1fr;
    }

    .typing-control-panel {
        position: static;
    }

    .typing-topbar {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 620px) {
    .typing-game-panel,
    .typing-empty-state,
    .typing-game-content {
        min-height: auto;
    }

    .typing-topbar,
    .typing-score-grid {
        grid-template-columns: 1fr;
    }

    .typing-input {
        min-height: 150px;
    }
}

.programming-title {
    margin-bottom: 22px;
}

.programming-layout {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.programming-control-panel {
    position: sticky;
    top: 18px;
}

.programming-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 22px;
}

.programming-score-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 22px;
}

.programming-score-card {
    padding: 15px 16px;
    border-radius: 22px;
    background: #f3f7ff;
}

.programming-score-card span {
    display: block;
    color: #52617d;
    font-size: 13px;
    font-weight: 900;
}

.programming-score-card strong {
    display: block;
    margin-top: 4px;
    color: #1f2a44;
    font-size: 22px;
    font-weight: 900;
}

.programming-game-panel {
    min-height: 620px;
}

.programming-empty-state,
.programming-game-content {
    min-height: 560px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
}

.programming-empty-state {
    align-items: center;
    text-align: center;
}

.programming-empty-state h2 {
    margin: 0;
    color: #1f2a44;
    font-size: clamp(28px, 4vw, 48px);
}

.programming-empty-state p {
    margin: 0;
    color: #52617d;
    font-size: 18px;
    font-weight: 800;
}

.programming-empty-icon {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 34px;
    color: #ffffff;
    background: linear-gradient(135deg, #7057ff, #00a6ff);
    box-shadow: 0 18px 36px rgba(0, 128, 255, 0.22);
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 1px;
}

.programming-topbar {
    display: grid;
    grid-template-columns: 1.5fr 0.5fr;
    gap: 12px;
}

.programming-topbar > div,
.programming-code-box,
.programming-question-box,
.programming-options-box,
.programming-status-box,
.programming-explanation {
    padding: 16px;
    border-radius: 22px;
    background: #f3f7ff;
}

.programming-label {
    display: block;
    margin-bottom: 8px;
    color: #52617d;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.programming-topbar strong {
    color: #1f2a44;
    font-size: 24px;
    font-weight: 900;
}

.programming-code {
    padding: 18px;
    border-radius: 18px;
    overflow-x: auto;
    color: #ffffff;
    background: #1f2a44;
    font-family: Consolas, Monaco, monospace;
    font-size: clamp(16px, 2vw, 22px);
    font-weight: 800;
    line-height: 1.55;
}

.programming-question {
    display: block;
    color: #1f2a44;
    font-size: clamp(20px, 2.5vw, 30px);
    font-weight: 900;
    line-height: 1.4;
}

.programming-options {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.programming-options li {
    padding: 14px 16px;
    border: 3px solid transparent;
    border-radius: 18px;
    color: #1f2a44;
    background: #ffffff;
    font-size: 17px;
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(31, 42, 68, 0.08);
}

.programming-options input {
    margin-right: 9px;
    transform: scale(1.15);
}

.programming-options li:hover {
    border-color: #b8c7ff;
}

.programming-options .answer-correct {
    color: #ffffff;
    background: #18c792;
}

.programming-options .answer-wrong {
    color: #ffffff;
    background: #ff5a76;
}

.programming-status-box {
    text-align: center;
    background: #fff5d6;
}

.programming-status-text {
    color: #684800;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.5;
}

.programming-explanation {
    color: #52617d;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.7;
    background: #eefdf7;
}

@media (max-width: 980px) {
    .programming-layout {
        grid-template-columns: 1fr;
    }

    .programming-control-panel {
        position: static;
    }
}

@media (max-width: 620px) {
    .programming-game-panel,
    .programming-empty-state,
    .programming-game-content {
        min-height: auto;
    }

    .programming-topbar,
    .programming-score-grid,
    .programming-options {
        grid-template-columns: 1fr;
    }
}

.algorithm-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.55fr);
    gap: 22px;
    align-items: start;
}

.algorithm-main-panel,
.algorithm-side-panel {
    padding: 24px;
}

.algorithm-side-panel {
    position: sticky;
    top: 18px;
}

.algorithm-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: end;
    margin-bottom: 18px;
}

.algorithm-toolbar-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.field-label {
    display: block;
    margin-bottom: 8px;
    color: #52617d;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.wide-select {
    width: 100%;
}

.asp-link-button {
    border: 0;
    min-height: 48px;
}

.algorithm-challenge-box {
    display: grid;
    gap: 8px;
    padding: 18px;
    margin-bottom: 18px;
    border-radius: 24px;
    background: linear-gradient(135deg, #eef4ff, #fff5d6);
}

.algorithm-challenge-title {
    color: #1f2a44;
    font-size: 22px;
    font-weight: 900;
}

.algorithm-challenge-text {
    color: #52617d;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.6;
}

.algorithm-target {
    display: inline-flex;
    width: fit-content;
    padding: 10px 14px;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, #18c792, #00a6ff);
    font-size: 16px;
    font-weight: 900;
}

.algorithm-input-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.algorithm-input-card,
.algorithm-step-card,
.algorithm-code-box,
.hint-card {
    border-radius: 24px;
    background: #f3f7ff;
}

.algorithm-input-card {
    padding: 14px;
}

.number-box {
    width: 100%;
    text-align: center;
    font-size: 24px;
    font-weight: 900;
}

.algorithm-step-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.algorithm-step-card {
    padding: 16px;
    border: 3px solid transparent;
    transition: 0.2s ease;
}

.algorithm-step-card:hover {
    border-color: #d7e1ff;
    transform: translateY(-2px);
}

.step-badge {
    display: inline-flex;
    padding: 8px 12px;
    margin-bottom: 12px;
    border-radius: 999px;
    color: #ffffff;
    background: #7057ff;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.step-fields {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.step-formula,
.step-result {
    display: block;
    font-weight: 900;
}

.step-formula {
    color: #52617d;
    line-height: 1.5;
}

.step-result {
    margin-top: 8px;
    color: #1f2a44;
    font-size: 28px;
}

.algorithm-side-panel h2 {
    margin-top: 0;
    color: #1f2a44;
    font-size: 28px;
}

.algorithm-feedback {
    display: block;
    padding: 15px;
    border-radius: 22px;
    color: #684800;
    background: #fff5d6;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.5;
}

.algorithm-final-result {
    display: grid;
    gap: 6px;
    padding: 18px;
    margin: 14px 0;
    border-radius: 24px;
    text-align: center;
    color: #ffffff;
    background: linear-gradient(135deg, #7057ff, #00a6ff);
}

.algorithm-final-result span {
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.algorithm-final-result label,
.algorithm-final-result .aspNetDisabled {
    font-size: 42px;
    font-weight: 900;
}

.compact-score-grid {
    grid-template-columns: 1fr 1fr;
}

.algorithm-code-box {
    padding: 16px;
    margin-top: 14px;
}

.algorithm-code-box h3 {
    margin-top: 0;
    color: #1f2a44;
}

.algorithm-code-box pre {
    margin: 0;
    padding: 16px;
    border-radius: 18px;
    overflow-x: auto;
    color: #ffffff;
    background: #1f2a44;
    font-family: Consolas, Monaco, monospace;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.6;
}

.hint-card {
    display: grid;
    gap: 8px;
    margin-top: 14px;
    padding: 16px;
    color: #52617d;
    font-weight: 800;
    line-height: 1.6;
}

.hint-card strong {
    color: #1f2a44;
    font-size: 18px;
}

@media (max-width: 980px) {
    .algorithm-layout {
        grid-template-columns: 1fr;
    }

    .algorithm-side-panel {
        position: static;
    }

    .algorithm-toolbar,
    .algorithm-step-grid {
        grid-template-columns: 1fr;
    }

    .algorithm-toolbar-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 680px) {
    .algorithm-input-grid,
    .compact-score-grid,
    .step-fields {
        grid-template-columns: 1fr;
    }
}

.asp-select,
.asp-textbox {
    width: 100%;
    min-height: 46px;
    border: 2px solid #dbe5ff;
    border-radius: 16px;
    padding: 10px 12px;
    color: #1f2a44;
    background: #ffffff;
    font-size: 16px;
    font-weight: 800;
    outline: none;
}

.asp-select:focus,
.asp-textbox:focus {
    border-color: #7057ff;
    box-shadow: 0 0 0 4px rgba(112, 87, 255, 0.12);
}

.score-grid {
    display: grid;
    gap: 10px;
}

.score-card {
    display: grid;
    gap: 5px;
    padding: 14px;
    border-radius: 20px;
    text-align: center;
    background: #f3f7ff;
}

.score-card span {
    color: #52617d;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.score-card label,
.score-card .aspNetDisabled {
    color: #1f2a44;
    font-size: 24px;
    font-weight: 900;
}

.algorithm-result-number {
    font-size: 42px;
    font-weight: 900;
}

.score-number {
    color: #1f2a44;
    font-size: 24px;
    font-weight: 900;
}


.words-layout {
    display: grid;
    grid-template-columns: minmax(260px, 340px) 1fr;
    gap: 22px;
    align-items: start;
}

.words-control-panel {
    position: sticky;
    top: 18px;
}

.words-control-panel h2 {
    margin-top: 0;
    color: #1f2a44;
    font-size: 28px;
}

.words-control-panel p {
    color: #52617d;
    font-weight: 800;
    line-height: 1.6;
}

.words-button-group {
    display: grid;
    gap: 10px;
    margin: 16px 0;
}

.asp-button {
    width: 100%;
    border: 0;
    cursor: pointer;
}

.btn-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border-radius: 18px;
    padding: 12px 18px;
    color: #1f2a44;
    background: #edf4ff;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(31, 42, 68, 0.08);
}

.words-main-panel {
    display: grid;
    gap: 16px;
}

.words-status-panel {
    padding: 16px;
}

.words-feedback {
    display: block;
    color: #684800;
    background: #fff5d6;
    border-radius: 20px;
    padding: 14px 16px;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.5;
}

.words-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 16px;
}

.word-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 38px rgba(31, 42, 68, 0.12);
}

.word-card-header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.word-number {
    color: #1f2a44;
    font-size: 18px;
    font-weight: 900;
}

.word-category {
    border-radius: 999px;
    padding: 7px 12px;
    color: #ffffff;
    background: #7057ff;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.word-letter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.word-letter,
.word-letter-input {
    width: 44px;
    height: 50px;
    border-radius: 15px;
    text-align: center;
    font-size: 25px;
    font-weight: 900;
    text-transform: uppercase;
}

.word-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, #7057ff, #4b7dff);
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.12);
}

.word-letter-input {
    border: 3px solid #ffcf4a;
    color: #1f2a44;
    background: #ffffff;
    outline: none;
}

.word-letter-input:focus {
    border-color: #7057ff;
    box-shadow: 0 0 0 4px rgba(112, 87, 255, 0.14);
}

.hint-letter {
    background: linear-gradient(135deg, #ffb800, #ff7a00);
}

.word-clue {
    margin: 0;
    color: #52617d;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.5;
}

.words-help-card {
    display: grid;
    gap: 7px;
    color: #52617d;
    font-weight: 800;
    line-height: 1.6;
}

.words-help-card strong {
    color: #1f2a44;
    font-size: 20px;
}

@media (max-width: 980px) {
    .words-layout {
        grid-template-columns: 1fr;
    }

    .words-control-panel {
        position: static;
    }
}

@media (max-width: 720px) {
    .words-grid {
        grid-template-columns: 1fr;
    }

    .word-letter,
    .word-letter-input {
        width: 38px;
        height: 44px;
        border-radius: 13px;
        font-size: 22px;
    }
}


.clever-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.clever-control-panel {
    position: sticky;
    top: 18px;
    display: grid;
    gap: 16px;
}

.clever-main-panel {
    display: grid;
    gap: 18px;
}

.clever-prompt-card {
    display: grid;
    gap: 18px;
}

.topic-pill {
    display: inline-flex;
    width: fit-content;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(112, 87, 255, 0.12);
    color: #4f46e5;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.clever-prompt-card p {
    margin: 0;
    color: #52617d;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.55;
}

.clever-visual {
    padding: 18px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(91, 124, 250, 0.12), rgba(255, 207, 74, 0.16));
    border: 2px solid rgba(91, 124, 250, 0.12);
}

.challenge-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.challenge-chips span,
.code-box,
.balance-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 10px 16px;
    border-radius: 16px;
    background: #ffffff;
    color: #1f2a44;
    font-weight: 900;
    box-shadow: 0 10px 24px rgba(24, 39, 75, 0.08);
}

.code-box,
.balance-box {
    width: fit-content;
    font-size: 24px;
    letter-spacing: 0.04em;
}

.balance-box {
    font-size: 28px;
    letter-spacing: 0;
}

.maze-grid {
    display: grid;
    grid-template-columns: repeat(3, 58px);
    gap: 8px;
    width: fit-content;
}

.maze-grid span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: #ffffff;
    color: #1f2a44;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(24, 39, 75, 0.08);
}

.clever-prompt-card h2 {
    margin: 0;
    color: #1f2a44;
    font-size: 24px;
    line-height: 1.3;
}

.option-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.option-list li {
    margin: 0;
    padding: 13px 14px;
    border-radius: 16px;
    background: #ffffff;
    border: 2px solid rgba(91, 124, 250, 0.12);
    box-shadow: 0 8px 18px rgba(24, 39, 75, 0.06);
    color: #1f2a44;
    font-weight: 900;
}

.option-list input {
    margin-right: 10px;
    transform: scale(1.15);
}

.option-list label {
    cursor: pointer;
}

.clever-feedback-panel {
    min-height: 76px;
}

.clever-feedback {
    display: block;
    padding: 14px 16px;
    border-radius: 16px;
    font-weight: 900;
    line-height: 1.45;
}

.clever-feedback.neutral {
    color: #43506a;
    background: rgba(91, 124, 250, 0.10);
}

.clever-feedback.good {
    color: #126b45;
    background: rgba(21, 184, 123, 0.14);
}

.clever-feedback.bad {
    color: #a23a2f;
    background: rgba(255, 106, 92, 0.14);
}

@media (max-width: 980px) {
    .clever-layout {
        grid-template-columns: 1fr;
    }

    .clever-control-panel {
        position: static;
    }
}

@media (max-width: 640px) {
    .maze-grid {
        grid-template-columns: repeat(3, 48px);
    }

    .maze-grid span {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    .code-box,
    .balance-box {
        font-size: 20px;
    }
}


.chess-layout {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.chess-control-panel {
    position: sticky;
    top: 18px;
    display: grid;
    gap: 16px;
}

.chess-main-panel {
    display: grid;
    gap: 18px;
}

.choice-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.choice-list li {
    padding: 12px 14px;
    border-radius: 16px;
    background: #ffffff;
    border: 2px solid rgba(91, 124, 250, 0.12);
    color: #1f2a44;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(24, 39, 75, 0.06);
}

.choice-list input {
    margin-right: 8px;
    transform: scale(1.1);
}

.chess-board-wrap {
    display: grid;
    justify-content: center;
}

.chess-board {
    display: grid;
    grid-template-columns: repeat(8, 72px);
    grid-template-rows: repeat(8, 72px);
    padding: 12px;
    border-radius: 28px;
    background: linear-gradient(135deg, #5b7cfa, #7057ff);
    box-shadow: 0 22px 50px rgba(24, 39, 75, 0.22);
    border: 4px solid rgba(255, 255, 255, 0.85);
}

.chess-square {
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    text-decoration: none;
    font-size: 42px;
    line-height: 1;
    font-weight: 900;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.chess-square.light {
    background: #fff5d6;
}

.chess-square.dark {
    background: #7fb3ff;
}

.chess-square:hover,
.chess-square:focus {
    transform: scale(1.04);
    box-shadow: inset 0 0 0 4px rgba(255, 184, 0, 0.65);
    z-index: 1;
}

.chess-square.selected {
    box-shadow: inset 0 0 0 5px #ffb800, 0 0 0 4px rgba(255, 184, 0, 0.22);
    transform: scale(1.05);
    z-index: 2;
}

.chess-square.white-piece {
    color: #ffffff;
    text-shadow: 0 2px 0 #1f2a44, 0 0 12px rgba(31, 42, 68, 0.45);
}

.chess-square.black-piece {
    color: #1f2a44;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.chess-status-panel {
    min-height: 72px;
}

.chess-status {
    display: block;
    padding: 14px 16px;
    border-radius: 16px;
    font-weight: 900;
    line-height: 1.45;
}

.chess-status.neutral {
    color: #43506a;
    background: rgba(91, 124, 250, 0.10);
}

.chess-status.good {
    color: #126b45;
    background: rgba(21, 184, 123, 0.14);
}

.chess-status.bad {
    color: #a23a2f;
    background: rgba(255, 106, 92, 0.14);
}

.chess-help-card,
.chess-instructions {
    display: grid;
    gap: 9px;
    color: #52617d;
    font-weight: 800;
    line-height: 1.6;
}

.chess-help-card strong,
.chess-instructions h2 {
    color: #1f2a44;
}

.chess-instructions h2 {
    margin: 0;
    font-size: 24px;
}

.chess-instructions p {
    margin: 0;
    color: #52617d;
    font-weight: 800;
    line-height: 1.6;
}

.instruction-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.instruction-grid div {
    padding: 14px;
    border-radius: 18px;
    background: #ffffff;
    border: 2px solid rgba(91, 124, 250, 0.10);
    box-shadow: 0 8px 18px rgba(24, 39, 75, 0.06);
}

.instruction-grid strong,
.instruction-grid span {
    display: block;
}

.instruction-grid strong {
    color: #1f2a44;
    font-size: 17px;
    margin-bottom: 5px;
}

.instruction-grid span {
    color: #52617d;
    font-weight: 800;
    line-height: 1.45;
}

@media (max-width: 1100px) {
    .chess-layout {
        grid-template-columns: 1fr;
    }

    .chess-control-panel {
        position: static;
    }
}

@media (max-width: 720px) {
    .chess-board {
        grid-template-columns: repeat(8, 42px);
        grid-template-rows: repeat(8, 42px);
        padding: 8px;
        border-radius: 20px;
    }

    .chess-square {
        width: 42px;
        height: 42px;
        font-size: 27px;
    }

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


.snake-hero {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(37, 99, 235, 0.16));
}

.snake-layout {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.snake-panel,
.snake-game-card {
    background: rgba(255, 255, 255, 0.94);
    border-radius: 28px;
    box-shadow: 0 18px 45px rgba(31, 41, 55, 0.12);
    border: 1px solid rgba(226, 232, 240, 0.85);
}

.snake-panel {
    padding: 24px;
}

.snake-game-card {
    padding: 24px;
}

.snake-score-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.mini-stat {
    background: linear-gradient(135deg, #f8fafc, #eef6ff);
    border: 1px solid #dbeafe;
    border-radius: 20px;
    padding: 14px;
    text-align: center;
}

.mini-stat strong {
    display: block;
    font-size: 1.45rem;
    color: #1d4ed8;
}

.mini-stat span {
    display: block;
    color: #64748b;
    font-size: 0.85rem;
    margin-top: 3px;
}

.snake-buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.snake-mobile-controls {
    display: grid;
    gap: 8px;
    justify-items: center;
    margin-top: 18px;
}

.snake-mobile-controls div {
    display: flex;
    gap: 8px;
}

.snake-arrow {
    border: 0;
    border-radius: 16px;
    padding: 10px 14px;
    background: #ecfdf5;
    color: #166534;
    font-weight: 800;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px #bbf7d0;
}

.snake-arrow:hover {
    background: #dcfce7;
}

.snake-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.snake-topline h2 {
    margin: 0 0 6px;
}

.snake-topline p {
    margin: 0;
    color: #475569;
}

.snake-badge {
    background: #dcfce7;
    color: #166534;
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 900;
    white-space: nowrap;
}

.snake-board-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #e0f2fe, #dcfce7);
    border-radius: 28px;
    padding: 18px;
    overflow: hidden;
}

#snakeCanvas {
    width: min(100%, 420px);
    height: auto;
    border-radius: 22px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
    border: 6px solid #ffffff;
    background: #ffffff;
    touch-action: none;
}

.select-input {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 16px;
    padding: 11px 12px;
    font-weight: 700;
    background: #ffffff;
}

@media (max-width: 900px) {
    .snake-layout {
        grid-template-columns: 1fr;
    }

    .snake-topline {
        flex-direction: column;
    }
}


.puzzle-hero {
    background: linear-gradient(135deg, rgba(230, 255, 244, 0.96), rgba(242, 247, 255, 0.96));
}

.puzzle-layout {
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.puzzle-panel {
    position: sticky;
    top: 18px;
}

.puzzle-difficulty-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 18px 0;
}

.puzzle-difficulty {
    border: 0;
    border-radius: 16px;
    padding: 12px 10px;
    font-weight: 900;
    cursor: pointer;
    color: #1d2b53;
    background: #edf2ff;
    box-shadow: inset 0 0 0 2px rgba(91, 124, 250, 0.12);
}

.puzzle-difficulty.active {
    color: #ffffff;
    background: linear-gradient(135deg, #5b7cfa, #7755f6);
    box-shadow: 0 12px 24px rgba(91, 124, 250, 0.28);
}

.puzzle-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 18px 0;
}

.puzzle-buttons {
    margin-bottom: 18px;
}

.puzzle-reference {
    display: none;
    border-radius: 22px;
    padding: 12px;
    background: #ffffff;
    box-shadow: inset 0 0 0 2px rgba(91, 124, 250, 0.12);
}

.puzzle-reference.show {
    display: block;
}

.puzzle-reference img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 18px;
    display: block;
}

.puzzle-reference p {
    margin: 10px 0 0;
    font-weight: 900;
    color: #1d2b53;
    text-align: center;
}

.puzzle-game-card {
    background: rgba(255, 255, 255, 0.94);
    border-radius: 30px;
    padding: 22px;
    box-shadow: 0 20px 60px rgba(29, 43, 83, 0.12);
}

.puzzle-topline {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.puzzle-topline h2 {
    margin: 0 0 6px;
    color: #1d2b53;
}

.puzzle-topline p {
    margin: 0;
    color: #52617a;
}

.puzzle-badge {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 10px 16px;
    color: #ffffff;
    font-weight: 900;
    background: linear-gradient(135deg, #19b37a, #5b7cfa);
    box-shadow: 0 12px 22px rgba(25, 179, 122, 0.22);
}

.puzzle-board-shell {
    background: #18213e;
    border-radius: 28px;
    padding: 12px;
    box-shadow: 0 24px 50px rgba(24, 33, 62, 0.2);
}

.puzzle-board {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    aspect-ratio: 4 / 3;
    display: grid;
    grid-template-columns: repeat(var(--puzzle-cols), 1fr);
    grid-template-rows: repeat(var(--puzzle-rows), 1fr);
    gap: 4px;
    border-radius: 20px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

.puzzle-piece {
    border: 0;
    cursor: pointer;
    background-repeat: no-repeat;
    border-radius: 10px;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.72), 0 2px 0 rgba(0, 0, 0, 0.08);
    transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.puzzle-piece:hover {
    transform: scale(0.98);
    filter: brightness(1.08);
}

.puzzle-piece.selected {
    transform: scale(0.94);
    box-shadow: inset 0 0 0 5px #ffd166, 0 0 0 4px rgba(255, 209, 102, 0.34);
}

.puzzle-piece.solved {
    cursor: default;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.puzzle-gallery-title {
    margin: 22px 0 12px;
    color: #1d2b53;
}

.puzzle-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.puzzle-thumb {
    border: 0;
    border-radius: 18px;
    padding: 8px;
    cursor: pointer;
    text-align: left;
    color: #1d2b53;
    background: #f8faff;
    box-shadow: inset 0 0 0 2px rgba(91, 124, 250, 0.1);
}

.puzzle-thumb.active {
    background: #ffffff;
    box-shadow: inset 0 0 0 3px #5b7cfa, 0 14px 24px rgba(91, 124, 250, 0.18);
}

.puzzle-thumb img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 14px;
    display: block;
}

.puzzle-thumb span {
    display: block;
    margin-top: 7px;
    font-size: 0.85rem;
    font-weight: 900;
    line-height: 1.2;
}

@media (max-width: 980px) {
    .puzzle-layout {
        grid-template-columns: 1fr;
    }

    .puzzle-panel {
        position: static;
    }

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

@media (max-width: 560px) {
    .puzzle-game-card {
        padding: 14px;
        border-radius: 22px;
    }

    .puzzle-topline {
        flex-direction: column;
    }

    .puzzle-board-shell {
        padding: 7px;
        border-radius: 20px;
    }

    .puzzle-board {
        gap: 3px;
        border-radius: 15px;
    }

    .puzzle-piece {
        border-radius: 7px;
    }

    .puzzle-gallery {
        grid-template-columns: 1fr;
    }
}


.dart-layout {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.dart-panel {
    display: grid;
    gap: 16px;
}

.dart-level-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 14px;
}

.dart-game-card {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 32px;
    padding: 22px;
    box-shadow: 0 22px 55px rgba(29, 43, 83, 0.14);
    border: 1px solid rgba(91, 124, 250, 0.16);
}

.dart-topline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.dart-topline h2 {
    margin: 4px 0 0;
    font-size: clamp(1.4rem, 2vw, 2rem);
    color: #1d2b53;
}

.dart-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}


.dart-realistic-scene {
    display: grid;
    grid-template-columns: minmax(250px, 0.92fr) minmax(260px, 1fr);
    gap: 18px;
    align-items: center;
    margin: 0 0 22px;
    padding: 16px;
    border-radius: 30px;
    background: linear-gradient(135deg, #f2f7ff, #fff2d7);
    border: 1px solid rgba(91, 124, 250, 0.18);
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.45);
}

.dart-photo-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(29, 43, 83, 0.18);
}

.dart-throw-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.dart-photo-badge {
    position: absolute;
    left: 14px;
    bottom: 14px;
    padding: 9px 13px;
    border-radius: 999px;
    background: rgba(29, 43, 83, 0.86);
    color: #ffffff;
    font-size: 13px;
    font-weight: 1000;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.dart-photo-copy h3 {
    margin: 12px 0 8px;
    color: #1d2b53;
    font-size: clamp(1.35rem, 2vw, 2rem);
    line-height: 1.12;
}

.dart-photo-copy p {
    margin: 0;
    color: #52617d;
    font-size: 16px;
    line-height: 1.65;
}

.dart-mini-tips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.dart-mini-tips span {
    padding: 8px 11px;
    border-radius: 999px;
    color: #1d2b53;
    background: #ffffff;
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(29, 43, 83, 0.08);
}

.dart-play-area {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 18px;
    align-items: center;
}

.dart-board-wrap {
    position: relative;
    max-width: 620px;
    width: 100%;
    margin: 0 auto;
    padding: 12px;
    border-radius: 36px;
    background: linear-gradient(135deg, #eaf2ff, #fff3d9);
    box-shadow: inset 0 0 0 3px rgba(29, 43, 83, 0.06), 0 18px 40px rgba(91, 124, 250, 0.18);
}

#dartCanvas {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 50%;
    cursor: crosshair;
    touch-action: none;
    background: #ffffff;
}

.dart-side-info {
    display: grid;
    gap: 12px;
}

.dart-float-score {
    position: absolute;
    transform: translate(-50%, -50%) scale(0.7);
    padding: 8px 12px;
    border-radius: 999px;
    background: #ff5c7a;
    color: #ffffff;
    font-weight: 1000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 12px 24px rgba(255, 92, 122, 0.28);
}

.dart-float-score.show {
    opacity: 1;
    transform: translate(-50%, -80%) scale(1);
}

.safe-note {
    margin: 12px 0 0;
    padding: 12px 14px;
    border-radius: 16px;
    background: #eef7ff;
    color: #1d2b53;
    font-weight: 800;
}

@media (max-width: 980px) {

    .dart-realistic-scene {
        grid-template-columns: 1fr;
    }

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

    .dart-play-area {
        grid-template-columns: 1fr;
    }

    .dart-side-info {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {

    .dart-realistic-scene {
        padding: 10px;
        border-radius: 22px;
    }

    .dart-photo-wrap {
        border-radius: 18px;
    }

    .dart-mini-tips span {
        flex: 1 1 100%;
        text-align: center;
    }

    .dart-game-card {
        padding: 14px;
        border-radius: 24px;
    }

    .dart-topline {
        flex-direction: column;
    }

    .dart-actions {
        width: 100%;
        justify-content: stretch;
    }

    .dart-actions .btn-secondary {
        flex: 1 1 100%;
    }

    .dart-side-info {
        grid-template-columns: 1fr;
    }

    .dart-board-wrap {
        padding: 8px;
        border-radius: 24px;
    }
}

/* Step 18: interactive dart hand aiming and flying dart */
.dart-layout-v2 {
    align-items: stretch;
}

.dart-game-card-v2 {
    overflow: hidden;
}

.dart-realistic-scene-v2 {
    margin-bottom: 22px;
}

.dart-play-area-v2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.dart-aim-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(300px, 620px) minmax(230px, 1fr);
    gap: 22px;
    align-items: center;
    min-height: 520px;
    padding: 20px;
    border-radius: 30px;
    background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.92), rgba(239, 247, 255, 0.86) 45%, rgba(225, 235, 255, 0.9)), linear-gradient(135deg, #eaf8ff, #fff6e8);
    border: 1px solid rgba(88, 104, 255, 0.16);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7), 0 18px 36px rgba(45, 64, 120, 0.13);
    overflow: hidden;
}

.dart-aim-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(91, 124, 250, 0.10) 2px, transparent 3px);
    background-size: 32px 32px;
    opacity: 0.45;
    pointer-events: none;
}

.dart-board-zone,
.dart-throw-zone,
.dart-control-panel {
    position: relative;
    z-index: 1;
}

.dart-board-wrap-v2 {
    margin: 0 auto;
    max-width: 620px;
    position: relative;
}

.dart-board-wrap-v2 #dartCanvas {
    width: 100%;
    max-width: 620px;
    height: auto;
    display: block;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 20px 46px rgba(20, 33, 61, 0.20), 0 0 0 12px rgba(255, 255, 255, 0.72);
}

.dart-reticle {
    position: absolute;
    width: 52px;
    height: 52px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 4px solid #00d1ff;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(0, 209, 255, 0.17), 0 0 22px rgba(0, 209, 255, 0.72);
    pointer-events: none;
    animation: dartPulse 1.25s ease-in-out infinite;
}

.dart-reticle::before,
.dart-reticle::after {
    content: "";
    position: absolute;
    background: #00d1ff;
    border-radius: 4px;
}

.dart-reticle::before {
    width: 72px;
    height: 4px;
    left: -14px;
    top: 22px;
}

.dart-reticle::after {
    width: 4px;
    height: 72px;
    left: 22px;
    top: -14px;
}

@keyframes dartPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.08); }
}

.dart-throw-zone {
    min-height: 430px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 247, 225, 0.88));
    border: 1px solid rgba(255, 180, 67, 0.28);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.distance-label {
    position: absolute;
    top: 16px;
    left: 18px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #14213d;
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.distance-track {
    position: absolute;
    left: 14%;
    right: 14%;
    top: 50%;
    height: 6px;
    border-radius: 999px;
    background: repeating-linear-gradient(90deg, rgba(20, 33, 61, 0.16) 0 18px, rgba(20, 33, 61, 0.04) 18px 36px);
}

.distance-track::before,
.distance-track::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: #ffbe0b;
    box-shadow: 0 0 0 7px rgba(255, 190, 11, 0.20);
}

.distance-track::before {
    left: -2px;
}

.distance-track::after {
    right: -2px;
}

.aim-hand {
    position: relative;
    width: 210px;
    height: 170px;
    transition: transform 120ms ease-out;
    filter: drop-shadow(0 18px 24px rgba(20, 33, 61, 0.20));
}

.aim-hand.throwing {
    animation: handThrow 620ms cubic-bezier(.12,.82,.16,1);
}

@keyframes handThrow {
    0% { transform: translate(var(--hand-x, 0), var(--hand-y, 0)) scale(1); }
    45% { transform: translate(var(--hand-x, 0), var(--hand-y, 0)) translateX(-28px) scale(0.98); }
    100% { transform: translate(var(--hand-x, 0), var(--hand-y, 0)) scale(1); }
}

.hand-palm {
    position: absolute;
    right: 0;
    bottom: 18px;
    width: 110px;
    height: 110px;
    border-radius: 42px 52px 50px 58px;
    background: linear-gradient(145deg, #f7c39e, #e59668 75%);
    border: 4px solid rgba(137, 78, 45, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    transform: rotate(-11deg);
    box-shadow: inset -8px -10px 18px rgba(132, 68, 39, 0.16), inset 8px 8px 18px rgba(255, 255, 255, 0.25);
}

.hand-palm::before {
    content: "";
    position: absolute;
    right: 22px;
    top: -23px;
    width: 34px;
    height: 64px;
    border-radius: 22px;
    background: linear-gradient(180deg, #f8c8a4, #e69a6e);
    box-shadow: -30px 8px 0 #efb084, -56px 28px 0 #eca77c;
}

.held-dart {
    position: absolute;
    left: 0;
    top: 48px;
    width: 175px;
    height: 30px;
    transform: rotate(-8deg);
    transform-origin: right center;
}

.held-tip,
.held-barrel,
.held-shaft,
.held-flight,
.fly-tip,
.fly-barrel,
.fly-shaft,
.fly-flight {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: block;
}

.held-tip,
.fly-tip {
    left: 0;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 34px solid #1b263b;
}

.held-barrel,
.fly-barrel {
    left: 30px;
    width: 58px;
    height: 18px;
    border-radius: 999px;
    background: repeating-linear-gradient(90deg, #ffbe0b 0 6px, #b9770e 6px 10px);
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.35), inset 0 -3px 4px rgba(0,0,0,0.20);
}

.held-shaft,
.fly-shaft {
    left: 84px;
    width: 58px;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, #1d4ed8, #38bdf8);
}

.held-flight,
.fly-flight {
    left: 132px;
    width: 46px;
    height: 42px;
    clip-path: polygon(0 50%, 48% 0, 100% 35%, 100% 65%, 48% 100%);
    background: conic-gradient(from 45deg, #ffffff 0 25%, #3b82f6 0 50%, #ffffff 0 75%, #3b82f6 0);
    background-size: 14px 14px;
    border: 2px solid rgba(20, 33, 61, 0.15);
}

.flying-dart {
    position: absolute;
    z-index: 8;
    left: 0;
    top: 0;
    width: 190px;
    height: 42px;
    transform: translate(0, 0);
    transform-origin: 10px center;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 14px 18px rgba(20, 33, 61, 0.28));
}

.flying-dart.fly {
    animation: dartSpin 620ms linear;
}

@keyframes dartSpin {
    0% { filter: drop-shadow(0 20px 22px rgba(20, 33, 61, 0.24)); }
    50% { filter: drop-shadow(0 8px 12px rgba(20, 33, 61, 0.28)); }
    100% { filter: drop-shadow(0 5px 8px rgba(20, 33, 61, 0.22)); }
}

.dart-control-panel {
    display: grid;
    grid-template-columns: minmax(240px, 360px) 1fr;
    gap: 18px;
    align-items: stretch;
}

.aim-pad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 68px);
    gap: 10px;
    padding: 16px;
    border-radius: 26px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(20, 33, 61, 0.10);
}

.aim-btn,
.throw-button {
    border: 0;
    border-radius: 20px;
    font-weight: 900;
    font-size: 22px;
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease;
}

.aim-btn {
    background: linear-gradient(135deg, #e7eeff, #ffffff);
    color: #1d2b53;
    box-shadow: inset 0 0 0 2px rgba(91, 124, 250, 0.18), 0 8px 16px rgba(91, 124, 250, 0.14);
}

.aim-btn:hover,
.throw-button:hover {
    transform: translateY(-2px);
}

.aim-up {
    grid-column: 2;
    grid-row: 1;
}

.aim-left {
    grid-column: 1;
    grid-row: 2;
}

.aim-right {
    grid-column: 3;
    grid-row: 2;
}

.aim-down {
    grid-column: 2;
    grid-row: 3;
}

.throw-button {
    grid-column: 2;
    grid-row: 2;
    background: linear-gradient(135deg, #ff4e64, #ffbe0b);
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(255, 78, 100, 0.28);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dart-side-info-v2 {
    display: grid;
    grid-template-columns: repeat(4, minmax(100px, 1fr));
    gap: 12px;
}

@media (max-width: 1100px) {
    .dart-aim-stage {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .dart-throw-zone {
        min-height: 230px;
    }

    .aim-hand {
        transform: scale(0.86);
    }

    .dart-control-panel {
        grid-template-columns: 1fr;
    }

    .dart-side-info-v2 {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }
}

@media (max-width: 700px) {
    .dart-aim-stage {
        padding: 12px;
        border-radius: 22px;
    }

    .dart-reticle {
        width: 38px;
        height: 38px;
        border-width: 3px;
    }

    .dart-reticle::before {
        width: 54px;
        left: -11px;
        top: 16px;
    }

    .dart-reticle::after {
        height: 54px;
        left: 16px;
        top: -11px;
    }

    .aim-pad {
        grid-template-rows: repeat(3, 58px);
        gap: 8px;
        padding: 12px;
    }

    .aim-btn,
    .throw-button {
        border-radius: 16px;
        font-size: 18px;
    }

    .dart-side-info-v2 {
        grid-template-columns: 1fr;
    }
}


.visit-counter {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 8px 18px rgba(30, 41, 59, 0.08);
    color: #25324d;
    font-weight: 700;
    white-space: nowrap;
}

.visit-counter-title {
    font-size: 13px;
    color: #5c6a83;
}

.visit-counter-number {
    min-width: 34px;
    height: 28px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #6c63ff, #19c2ff);
    color: #ffffff;
    font-size: 14px;
    box-shadow: 0 8px 16px rgba(108, 99, 255, 0.25);
}

.visit-counter-today {
    font-size: 13px;
    color: #2f9b6a;
}

@media (max-width: 720px) {
    .visit-counter {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
}

.crossword-hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at top left, rgba(255, 190, 11, 0.28), transparent 34%), radial-gradient(circle at top right, rgba(25, 194, 255, 0.22), transparent 36%), linear-gradient(135deg, rgba(255,255,255,0.94), rgba(246,249,255,0.94));
}

.crossword-layout {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(360px, 1fr) minmax(260px, 360px);
    gap: 22px;
    align-items: start;
}

.crossword-control-panel,
.crossword-clue-panel,
.crossword-main-panel {
    min-width: 0;
}

.crossword-control-panel {
    position: sticky;
    top: 18px;
    background: linear-gradient(180deg, #ffffff, #f6fbff);
}

.crossword-mascot {
    width: 74px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background: linear-gradient(135deg, #ffe066, #ff8fab);
    box-shadow: 0 14px 26px rgba(255, 143, 171, 0.28);
    font-size: 34px;
    margin-bottom: 14px;
}

.crossword-button-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 16px 0;
}

.crossword-score-grid {
    grid-template-columns: repeat(2, minmax(110px, 1fr));
}

.crossword-mini-help {
    margin-top: 16px;
    padding: 16px;
    display: grid;
    gap: 6px;
    background: linear-gradient(135deg, #fff7ed, #eff6ff);
    border: 1px solid rgba(91, 124, 250, 0.10);
}

.crossword-main-panel {
    display: grid;
    gap: 18px;
}

.crossword-status-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    background: linear-gradient(135deg, #ffffff, #f0f7ff);
}

.crossword-status-panel h2 {
    margin: 4px 0 8px 0;
}

.crossword-status-panel p {
    margin: 0;
    color: #5f6f89;
}

.crossword-stars {
    min-width: 112px;
    text-align: right;
    font-size: 30px;
    letter-spacing: 2px;
    color: #ffbe0b;
    text-shadow: 0 5px 14px rgba(255, 190, 11, 0.25);
}

.crossword-board-wrap {
    padding: 20px;
    border-radius: 34px;
    background: linear-gradient(135deg, rgba(91,124,250,0.12), rgba(25,194,255,0.13), rgba(255,190,11,0.12));
    box-shadow: 0 18px 38px rgba(30, 41, 59, 0.10);
    overflow-x: auto;
}

.crossword-board {
    display: grid;
    gap: 5px;
    justify-content: center;
    min-width: max-content;
}

.crossword-cell {
    width: 46px;
    height: 46px;
    position: relative;
    border-radius: 12px;
}

.crossword-cell.blank {
    background: linear-gradient(135deg, rgba(39, 50, 74, 0.16), rgba(39, 50, 74, 0.07));
}

.crossword-cell.active {
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(30, 41, 59, 0.12), inset 0 0 0 2px rgba(91, 124, 250, 0.10);
}

.crossword-cell.active:nth-child(4n+1) {
    background: linear-gradient(135deg, #ffffff, #fff7d6);
}

.crossword-cell.active:nth-child(4n+2) {
    background: linear-gradient(135deg, #ffffff, #e9f5ff);
}

.crossword-cell.active:nth-child(4n+3) {
    background: linear-gradient(135deg, #ffffff, #f2edff);
}

.crossword-number {
    position: absolute;
    top: 4px;
    left: 6px;
    font-size: 10px;
    font-weight: 900;
    color: #5b7cfa;
    z-index: 1;
}

.crossword-cell input {
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    text-align: center;
    text-transform: uppercase;
    font-size: 24px;
    font-weight: 900;
    color: #25324d;
    border-radius: 12px;
    padding-top: 7px;
}

.crossword-cell input:focus,
.crossword-cell input.selected {
    box-shadow: inset 0 0 0 3px #6c63ff, 0 0 0 4px rgba(108, 99, 255, 0.16);
    background: rgba(255, 255, 255, 0.82);
}

.crossword-cell input.correct {
    background: linear-gradient(135deg, #d8ffe7, #b8f7cf);
    color: #126b3b;
    box-shadow: inset 0 0 0 3px #27c771;
}

.crossword-cell input.wrong {
    background: linear-gradient(135deg, #fff1d6, #ffd7a1);
    color: #8a3a00;
    box-shadow: inset 0 0 0 3px #ff9f1c;
}

.crossword-cell input.empty {
    background: linear-gradient(135deg, #f9fbff, #eef4ff);
    box-shadow: inset 0 0 0 3px rgba(91, 124, 250, 0.20);
}

.crossword-cell input.hinted {
    background: linear-gradient(135deg, #e8fbff, #cef4ff);
    color: #006d91;
    box-shadow: inset 0 0 0 3px #19c2ff;
}

.crossword-clue-panel {
    background: linear-gradient(180deg, #ffffff, #fffaf0);
}

.crossword-clue-panel h2 {
    margin-top: 0;
}

.crossword-clue-columns {
    display: grid;
    gap: 18px;
}

.crossword-clue-columns h3 {
    margin: 0 0 10px 0;
    color: #25324d;
}

.crossword-clues {
    display: grid;
    gap: 10px;
    padding-left: 20px;
    margin: 0;
}

.crossword-clues li {
    padding: 10px 12px;
    border-radius: 16px;
    background: #ffffff;
    color: #43526c;
    line-height: 1.45;
    box-shadow: 0 8px 18px rgba(30, 41, 59, 0.08);
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.crossword-clues li:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(91, 124, 250, 0.14);
}

.crossword-clues strong {
    color: #6c63ff;
}

.crossword-clues span {
    color: #2f9b6a;
    font-weight: 800;
}

@media (max-width: 1180px) {
    .crossword-layout {
        grid-template-columns: 1fr;
    }

    .crossword-control-panel {
        position: static;
    }

    .crossword-button-group {
        grid-template-columns: repeat(4, minmax(120px, 1fr));
    }

    .crossword-clue-columns {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }
}

@media (max-width: 720px) {
    .crossword-button-group,
    .crossword-clue-columns {
        grid-template-columns: 1fr;
    }

    .crossword-status-panel {
        align-items: flex-start;
        flex-direction: column;
    }

    .crossword-stars {
        text-align: left;
    }

    .crossword-board-wrap {
        padding: 12px;
        border-radius: 24px;
    }

    .crossword-cell {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .crossword-cell input {
        font-size: 20px;
        border-radius: 10px;
    }
}

.ocean-hero {
    background: radial-gradient(circle at 20% 0%, rgba(125, 249, 255, 0.35), transparent 32%), linear-gradient(135deg, #063f8c 0%, #12b2d6 46%, #6af4c8 100%);
    color: #ffffff;
    border-radius: 30px;
    box-shadow: 0 22px 50px rgba(3, 61, 115, 0.22);
}

.ocean-hero .kicker,
.ocean-hero h1,
.ocean-hero p {
    color: #ffffff;
}

.ocean-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) 360px;
    gap: 24px;
    align-items: start;
}

.ocean-game-card,
.ocean-panel {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 30px;
    padding: 18px;
    box-shadow: 0 18px 42px rgba(23, 43, 77, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.72);
}

.ocean-hud {
    display: grid;
    grid-template-columns: repeat(5, minmax(100px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.ocean-hud-box {
    background: linear-gradient(135deg, #ffffff 0%, #effbff 100%);
    border-radius: 20px;
    padding: 12px 14px;
    box-shadow: inset 0 0 0 1px rgba(91, 124, 250, 0.12), 0 8px 18px rgba(30, 41, 59, 0.07);
    display: grid;
    gap: 3px;
}

.ocean-hud-box span {
    font-size: 12px;
    font-weight: 800;
    color: #5b6f8d;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ocean-hud-box strong {
    font-size: 24px;
    color: #064e82;
    line-height: 1;
}

.ocean-canvas-wrap {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    background: #06294a;
    box-shadow: 0 18px 36px rgba(8, 47, 73, 0.22);
    border: 8px solid #ffffff;
}

.ocean-canvas {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    touch-action: none;
    cursor: crosshair;
}

.ocean-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(3, 33, 64, 0.46);
    backdrop-filter: blur(3px);
}

.ocean-overlay.show {
    display: flex;
}

.ocean-overlay-card {
    width: min(520px, 100%);
    background: rgba(255, 255, 255, 0.96);
    border-radius: 30px;
    padding: 28px;
    text-align: center;
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.22);
}

.ocean-overlay-card span {
    display: inline-flex;
    padding: 7px 14px;
    border-radius: 999px;
    background: #e0fbff;
    color: #087ea4;
    font-weight: 900;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ocean-overlay-card h2 {
    margin: 14px 0 8px;
    color: #11345c;
    font-size: clamp(28px, 4vw, 44px);
}

.ocean-overlay-card p {
    color: #41546f;
    line-height: 1.55;
    margin-bottom: 18px;
}

.ocean-panel {
    position: sticky;
    top: 18px;
    display: grid;
    gap: 18px;
}

.ocean-panel h2 {
    margin: 0;
    color: #11345c;
}

.ocean-instructions {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 20px;
    color: #40536f;
    line-height: 1.5;
}

.ocean-controls-panel {
    display: grid;
    gap: 10px;
}

.ocean-level-panel {
    display: grid;
    gap: 8px;
}

.ocean-level-panel label {
    font-weight: 900;
    color: #11345c;
}

.ocean-select {
    width: 100%;
    border: 2px solid #dbeafe;
    border-radius: 18px;
    padding: 12px 14px;
    font-weight: 800;
    color: #11345c;
    background: #ffffff;
}

.ocean-tip-box {
    display: grid;
    gap: 6px;
    background: linear-gradient(135deg, #fff7dc 0%, #e0fbff 100%);
    border-radius: 22px;
    padding: 16px;
    color: #4b5872;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.ocean-tip-box strong {
    color: #e17b00;
    font-size: 18px;
}

.ocean-mobile-controls {
    display: none;
    margin-top: 14px;
    gap: 10px;
    justify-items: center;
}

.ocean-mobile-controls div {
    display: flex;
    gap: 10px;
}

.ocean-mobile-controls button {
    min-width: 78px;
    min-height: 48px;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, #5b7cfa, #00c2ff);
    color: #ffffff;
    font-weight: 900;
    box-shadow: 0 10px 20px rgba(91, 124, 250, 0.22);
}

@media (max-width: 1180px) {
    .ocean-layout {
        grid-template-columns: 1fr;
    }

    .ocean-panel {
        position: static;
    }
}

@media (max-width: 780px) {
    .ocean-hud {
        grid-template-columns: repeat(2, minmax(110px, 1fr));
    }

    .ocean-mobile-controls {
        display: grid;
    }

    .ocean-game-card,
    .ocean-panel {
        padding: 12px;
        border-radius: 24px;
    }

    .ocean-canvas-wrap {
        border-width: 5px;
        border-radius: 24px;
    }
}

.racer-title {
    background: radial-gradient(circle at top left, rgba(255, 209, 102, 0.26), transparent 34%), linear-gradient(135deg, rgba(76, 201, 240, 0.18), rgba(91, 124, 250, 0.16));
    border-radius: 28px;
    padding: 28px;
}

.racer-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
}

.racer-game-card,
.racer-panel > div {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 28px;
    padding: 18px;
    box-shadow: 0 18px 38px rgba(31, 41, 55, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.72);
}

.racer-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: end;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.racer-toolbar label {
    display: block;
    font-weight: 900;
    color: #172554;
    margin-bottom: 6px;
}

.racer-select {
    min-width: 230px;
    border: 2px solid #c7d2fe;
    border-radius: 18px;
    padding: 12px 14px;
    font-weight: 800;
    color: #172554;
    background: #ffffff;
}

.racer-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.racer-hud {
    display: grid;
    grid-template-columns: repeat(6, minmax(90px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.racer-hud div {
    background: linear-gradient(135deg, #172554, #5b7cfa);
    color: #ffffff;
    border-radius: 20px;
    padding: 12px;
    text-align: center;
    box-shadow: 0 10px 22px rgba(91, 124, 250, 0.22);
}

.racer-hud strong {
    display: block;
    font-size: 24px;
    line-height: 1;
}

.racer-hud span {
    display: block;
    margin-top: 5px;
    font-weight: 800;
    font-size: 12px;
    opacity: 0.92;
}

.racer-canvas-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    border: 7px solid #172554;
    background: #172554;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.18), 0 18px 34px rgba(15, 23, 42, 0.18);
}

#cityRacerCanvas {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #111827;
}

.racer-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 22px;
    color: #ffffff;
    background: radial-gradient(circle, rgba(23, 37, 84, 0.58), rgba(15, 23, 42, 0.72));
    backdrop-filter: blur(2px);
}

.racer-overlay.hidden {
    display: none;
}

.racer-overlay h2 {
    font-size: clamp(30px, 5vw, 64px);
    margin: 0 0 10px;
    color: #ffffff;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.32);
}

.racer-overlay p {
    max-width: 620px;
    font-size: clamp(16px, 2vw, 24px);
    font-weight: 700;
    margin: 0 0 14px;
}

.racer-overlay span {
    background: #ffd166;
    color: #172554;
    font-weight: 900;
    border-radius: 999px;
    padding: 10px 18px;
}

.racer-panel {
    display: grid;
    gap: 16px;
    position: sticky;
    top: 16px;
}

.racer-instructions h2 {
    margin: 0 0 10px;
    color: #172554;
}

.racer-instructions ul {
    margin: 0;
    padding-left: 20px;
    color: #334155;
    font-weight: 700;
    line-height: 1.7;
}

.racer-instructions p {
    color: #334155;
    line-height: 1.6;
    margin: 8px 0;
}

.racer-key-box {
    background: linear-gradient(135deg, rgba(255, 209, 102, 0.24), rgba(255, 255, 255, 0.94)) !important;
}

.racer-status-box {
    background: linear-gradient(135deg, rgba(6, 214, 160, 0.20), rgba(255, 255, 255, 0.94)) !important;
}

.racer-status-box p {
    font-weight: 900;
    color: #0f766e;
}

.racer-mobile-controls {
    display: none;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 14px;
}

.racer-mobile-controls button {
    min-height: 50px;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, #5b7cfa, #4cc9f0);
    color: #ffffff;
    font-weight: 900;
    box-shadow: 0 10px 20px rgba(91, 124, 250, 0.22);
}

@media (max-width: 1180px) {
    .racer-layout {
        grid-template-columns: 1fr;
    }

    .racer-panel {
        position: static;
    }
}

@media (max-width: 780px) {
    .racer-hud {
        grid-template-columns: repeat(2, minmax(110px, 1fr));
    }

    .racer-mobile-controls {
        display: grid;
    }

    .racer-game-card,
    .racer-panel > div {
        padding: 12px;
        border-radius: 22px;
    }

    .racer-canvas-wrap {
        border-width: 5px;
        border-radius: 22px;
    }
}

/* Step 23: professional game cover cards */
.hero-with-art {
    align-items: stretch;
}

.hero-cover-stack {
    position: relative;
    min-height: 430px;
}

.hero-cover-stack img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    border-radius: 28px;
    box-shadow: 0 18px 40px rgba(31, 42, 68, 0.16);
    border: 6px solid rgba(255, 255, 255, 0.78);
}

.hero-cover-stack img:nth-child(2) {
    margin-top: -34px;
    transform: rotate(2deg);
}

.hero-cover-stack .stat-card {
    margin-top: 16px;
}

.game-card-media {
    padding: 14px;
    min-height: 460px;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.game-card-media:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 54px rgba(31, 42, 68, 0.18);
}

.game-card-media::before {
    display: none;
}

.game-card-media .game-thumb {
    width: 100%;
    height: 178px;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 14px;
    background: #eef4ff;
    box-shadow: 0 16px 32px rgba(29, 43, 83, 0.16);
}

.game-card-media .game-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.28s ease;
}

.game-card-media:hover .game-thumb img {
    transform: scale(1.04);
}

.game-card-media h3 {
    margin-top: 12px;
}

.game-card-media .btn-primary {
    width: 100%;
    margin-top: 6px;
}

.library-count {
    padding: 9px 14px;
    border-radius: 999px;
    color: #172554;
    background: #fff1af;
    font-weight: 900;
}

.games-library-title {
    background: radial-gradient(circle at top left, rgba(255, 209, 102, 0.22), transparent 34%), radial-gradient(circle at top right, rgba(0, 183, 255, 0.16), transparent 36%), rgba(255, 255, 255, 0.9);
}

@media (max-width: 1000px) {
    .game-card-media {
        min-height: 430px;
    }

    .game-card-media .game-thumb {
        height: 160px;
    }
}

@media (max-width: 760px) {
    .hero-cover-stack {
        min-height: auto;
    }

    .hero-cover-stack img {
        height: 160px;
    }

    .game-card-media {
        min-height: auto;
    }

    .game-card-media .game-thumb {
        height: 185px;
    }
}

.fruit-title {
    background: linear-gradient(135deg, rgba(255, 247, 212, 0.96), rgba(217, 255, 218, 0.96));
}

.fruit-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 280px;
    gap: 22px;
    align-items: start;
}

.fruit-score-panel,
.fruit-help-panel,
.fruit-game-card {
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 40px rgba(31, 62, 120, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.fruit-score-panel {
    padding: 16px;
    display: grid;
    gap: 14px;
}

.fruit-score-card {
    border-radius: 20px;
    padding: 16px;
    background: linear-gradient(135deg, #ffffff, #eef6ff);
    border: 2px solid #d9ecff;
    text-align: center;
}

.fruit-score-card span {
    display: block;
    font-size: 0.82rem;
    color: #57708e;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.fruit-score-card strong {
    display: block;
    margin-top: 7px;
    color: #1559c8;
    font-size: 2rem;
    line-height: 1;
}

.fruit-game-card {
    padding: 22px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(239, 253, 255, 0.96));
}

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

.fruit-small-btn {
    border: 0;
    border-radius: 999px;
    padding: 11px 18px;
    color: #17407d;
    font-weight: 900;
    background: linear-gradient(135deg, #ffe568, #ffb13b);
    box-shadow: 0 10px 20px rgba(255, 169, 47, 0.24);
    cursor: pointer;
}

.fruit-progress {
    flex: 1;
    text-align: center;
    color: #22507e;
    font-weight: 900;
}

.fruit-progress div {
    margin-top: 8px;
    height: 12px;
    background: #e7f1ff;
    border-radius: 999px;
    overflow: hidden;
}

.fruit-progress i {
    display: block;
    height: 100%;
    width: 10%;
    background: linear-gradient(90deg, #57d957, #1dadff);
    border-radius: 999px;
}

.fruit-clue-area {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 20px;
    border-radius: 26px;
    background: radial-gradient(circle at 25% 25%, #fff7b5, #d8ff83 42%, #8be36d 100%);
    border: 4px solid #ffffff;
    box-shadow: inset 0 0 0 2px rgba(69, 169, 69, 0.18);
}

.fruit-picture {
    min-height: 180px;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.58);
    font-size: 7.5rem;
    box-shadow: inset 0 0 35px rgba(255, 255, 255, 0.7), 0 15px 30px rgba(51, 118, 47, 0.16);
}

.fruit-clue-text {
    color: #1f6b1d;
}

.fruit-question {
    display: inline-flex;
    border-radius: 999px;
    background: #1267d8;
    color: #ffffff;
    padding: 10px 20px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 10px 20px rgba(18, 103, 216, 0.25);
}

.fruit-clue-text h2 {
    margin: 16px 0 10px 0;
    font-size: 2.1rem;
    color: #0a5bce;
}

.fruit-clue-text p {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.5;
}

.fruit-answer-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 24px 0 18px 0;
}

.fruit-answer-box {
    width: 58px;
    height: 62px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 3px solid #bfd3e8;
    color: #064ca5;
    font-size: 1.85rem;
    font-weight: 1000;
    box-shadow: 0 8px 18px rgba(31, 62, 120, 0.12);
}

.fruit-answer-box:empty {
    background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.fruit-letter-bank {
    display: grid;
    grid-template-columns: repeat(6, minmax(46px, 1fr));
    gap: 12px;
    max-width: 580px;
    margin: 0 auto;
}

.fruit-letter-tile {
    min-height: 58px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff, #eef6ff);
    color: #0f4dad;
    font-size: 1.8rem;
    font-weight: 1000;
    box-shadow: 0 9px 0 #b4c9dd, 0 14px 24px rgba(31, 62, 120, 0.14);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.fruit-letter-tile:hover {
    transform: translateY(-3px);
}

.fruit-letter-tile.selected,
.fruit-letter-tile:disabled {
    opacity: 0.35;
    transform: translateY(5px);
    box-shadow: 0 2px 0 #b4c9dd, 0 7px 16px rgba(31, 62, 120, 0.08);
}

.fruit-message {
    margin: 20px auto 0 auto;
    max-width: 680px;
    text-align: center;
    border-radius: 18px;
    padding: 14px 18px;
    background: #eef7ff;
    color: #22507e;
    font-weight: 900;
}

.fruit-message.success {
    background: #e8ffe7;
    color: #12772f;
}

.fruit-message.warn {
    background: #fff8d8;
    color: #8a5c00;
}

.fruit-message.danger {
    background: #ffe9e9;
    color: #b51e2f;
}

.fruit-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
}

.fruit-help-panel {
    padding: 16px;
}

.fruit-help-panel img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 22px;
    display: block;
    margin-bottom: 16px;
}

.fruit-help-panel h3 {
    margin: 0 0 8px 0;
    color: #1559c8;
    font-size: 1.45rem;
}

.fruit-help-panel p,
.fruit-help-panel li {
    color: #435b75;
    font-weight: 700;
    line-height: 1.55;
}

.fruit-help-panel ul {
    padding-left: 18px;
    margin-bottom: 0;
}

@media (max-width: 1100px) {
    .fruit-layout {
        grid-template-columns: 1fr;
    }

    .fruit-score-panel {
        grid-template-columns: repeat(4, 1fr);
    }

    .fruit-help-panel {
        display: grid;
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 18px;
        align-items: center;
    }
}

@media (max-width: 720px) {
    .fruit-score-panel,
    .fruit-help-panel,
    .fruit-clue-area {
        grid-template-columns: 1fr;
    }

    .fruit-letter-bank {
        grid-template-columns: repeat(4, 1fr);
    }

    .fruit-answer-box {
        width: 48px;
        height: 54px;
        font-size: 1.45rem;
    }

    .fruit-picture {
        min-height: 150px;
        font-size: 6rem;
    }
}

.animal-title {
    background: linear-gradient(135deg, #e6fff3, #dff4ff 50%, #fff0c7);
    border: 1px solid rgba(62, 183, 120, 0.22);
}

.animal-game-shell {
    background: radial-gradient(circle at top left, rgba(255, 228, 104, 0.35), transparent 34%), linear-gradient(135deg, #dffce9, #e4f3ff 45%, #fff0e0);
    border-radius: 32px;
    padding: 22px;
    box-shadow: 0 24px 60px rgba(35, 76, 90, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.75);
    overflow: hidden;
    position: relative;
}

.animal-game-shell:before,
.animal-game-shell:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.45;
}

.animal-game-shell:before {
    width: 260px;
    height: 260px;
    background: #8df1b1;
    right: -95px;
    top: -110px;
}

.animal-game-shell:after {
    width: 220px;
    height: 220px;
    background: #ffe070;
    left: -100px;
    bottom: -120px;
}

.animal-top-hud {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(240px, 1.5fr) repeat(4, minmax(120px, 0.65fr));
    gap: 14px;
    margin-bottom: 20px;
}

.animal-logo,
.animal-hud-card {
    background: rgba(255, 255, 255, 0.88);
    border-radius: 24px;
    padding: 14px 16px;
    box-shadow: 0 12px 24px rgba(25, 91, 83, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.85);
}

.animal-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.animal-logo-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: linear-gradient(135deg, #ffb938, #ff7a4e);
    font-size: 2.1rem;
    box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.08);
}

.animal-logo strong {
    display: block;
    color: #17315b;
    font-size: 1.35rem;
    font-weight: 900;
}

.animal-logo span:last-child {
    color: #52718a;
    font-weight: 800;
}

.animal-hud-card span,
.animal-panel span,
.animal-hud-card small {
    color: #668198;
    font-weight: 800;
}

.animal-hud-card strong {
    display: block;
    color: #17315b;
    font-size: 1.65rem;
    font-weight: 1000;
    margin-top: 4px;
}

.animal-hud-card.coins strong {
    color: #d67c00;
}

.animal-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 0.78fr 1.7fr 0.9fr;
    gap: 20px;
    align-items: start;
}

.animal-side-panel {
    display: grid;
    gap: 16px;
}

.animal-panel {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 26px;
    padding: 18px;
    box-shadow: 0 16px 32px rgba(32, 80, 110, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.78);
}

.animal-panel h3 {
    margin: 0 0 14px 0;
    color: #17315b;
    font-size: 1.25rem;
    font-weight: 1000;
}

.animal-panel p {
    color: #4d657b;
    font-weight: 750;
    line-height: 1.55;
    margin: 7px 0;
}

.green-panel {
    background: linear-gradient(135deg, #ffffff, #e9ffe7);
}

.blue-panel {
    background: linear-gradient(135deg, #ffffff, #e4f2ff);
}

.purple-panel {
    background: linear-gradient(135deg, #ffffff, #f0e8ff);
}

.pink-panel {
    background: linear-gradient(135deg, #ffffff, #ffe8f3);
}

.orange-panel {
    background: linear-gradient(135deg, #ffffff, #fff0d1);
    text-align: center;
}

.animal-stat-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    margin-bottom: 10px;
}

.animal-stat-row > span {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: #ffe77a;
    font-size: 1.45rem;
}

.animal-stat-row b {
    display: block;
    color: #17315b;
    font-size: 1.32rem;
    font-weight: 1000;
}

.animal-stat-row small {
    color: #59738b;
    font-weight: 800;
}

.animal-main-panel {
    background: rgba(255, 255, 255, 0.93);
    border-radius: 34px;
    padding: 20px;
    box-shadow: 0 24px 48px rgba(20, 75, 94, 0.17);
    border: 1px solid rgba(255, 255, 255, 0.82);
}

.animal-card-stage {
    display: grid;
    grid-template-columns: 56px 1fr 56px;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
}

.animal-nav-btn {
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 18px;
    background: linear-gradient(135deg, #56ccff, #4776ff);
    color: #fff;
    font-size: 1.8rem;
    font-weight: 1000;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(49, 100, 224, 0.25);
}

.animal-level-medal {
    text-align: center;
    background: linear-gradient(135deg, #ffdc63, #ff8e43);
    color: #17315b;
    border-radius: 24px;
    padding: 12px;
    box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.08), 0 10px 22px rgba(245, 145, 47, 0.20);
}

.animal-level-medal span {
    display: block;
    font-weight: 900;
}

.animal-level-medal strong {
    font-size: 2rem;
    font-weight: 1000;
}

.animal-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 8px 0 16px 0;
}

.animal-dots span {
    width: 12px;
    height: 12px;
    border-radius: 99px;
    background: #d8e4ef;
}

.animal-dots span.active {
    background: #4b7cff;
    width: 34px;
}

.animal-dots span.done {
    background: #42cf75;
}

.animal-photo-card {
    min-height: 330px;
    border-radius: 32px;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 25% 15%, rgba(255, 244, 145, 0.85), transparent 26%), linear-gradient(135deg, #66d683 0%, #60d7ee 45%, #8a72ff 100%);
    display: grid;
    place-items: center;
    box-shadow: inset 0 -12px 0 rgba(0, 0, 0, 0.08);
}

.animal-photo-card:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 85%, rgba(255,255,255,0.5), transparent 24%), radial-gradient(circle at 10% 90%, rgba(255,255,255,0.35), transparent 22%);
    opacity: 0.7;
}

.animal-photo-card.zoomed .animal-emoji {
    transform: scale(1.18) rotate(-2deg);
}

.animal-question-pill {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.9);
    color: #17315b;
    border-radius: 999px;
    padding: 10px 16px;
    font-weight: 1000;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.10);
}

.animal-zoom {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 16px;
    background: #ffffff;
    cursor: pointer;
    font-size: 1.25rem;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.animal-picture {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 240px;
    display: grid;
    place-items: center;
}

.animal-emoji {
    display: inline-grid;
    place-items: center;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.74);
    font-size: 7.5rem;
    box-shadow: 0 20px 40px rgba(37, 83, 91, 0.18), inset 0 -10px 0 rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease;
}

.animal-habitat {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: #17315b;
    color: #fff;
    padding: 9px 16px;
    border-radius: 999px;
    font-weight: 1000;
}

.animal-hint-card {
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: min(310px, 72%);
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 22px;
    padding: 12px;
    box-shadow: 0 12px 24px rgba(0,0,0,0.13);
    z-index: 2;
}

.animal-hint-card span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #ffe16a;
    font-size: 1.4rem;
}

.animal-hint-card b {
    display: block;
    color: #17315b;
    font-weight: 1000;
}

.animal-hint-card p {
    margin: 3px 0 0 0;
    color: #516a80;
    font-weight: 800;
    line-height: 1.35;
}

.animal-answer-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0 14px 0;
}

.animal-answer-box {
    width: 54px;
    height: 60px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    border: 3px dashed #a7b9d5;
    background: #fff;
    color: #17315b;
    font-size: 1.8rem;
    font-weight: 1000;
    box-shadow: 0 8px 16px rgba(42, 83, 133, 0.10);
}

.animal-answer-box.revealed {
    border-style: solid;
    border-color: #ffb92f;
    background: #fff6d4;
}

.animal-letter-bank {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.animal-letter-tile {
    min-height: 54px;
    border: none;
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff, #e6f1ff);
    color: #17315b;
    font-size: 1.35rem;
    font-weight: 1000;
    cursor: pointer;
    box-shadow: 0 10px 18px rgba(40, 92, 140, 0.13), inset 0 -4px 0 rgba(0, 0, 0, 0.06);
}

.animal-letter-tile:hover {
    transform: translateY(-2px);
}

.animal-letter-tile.selected,
.animal-letter-tile:disabled {
    background: linear-gradient(135deg, #7ac7ff, #6772ff);
    color: #fff;
    opacity: 0.82;
    cursor: default;
}

.animal-message {
    min-height: 48px;
    border-radius: 18px;
    padding: 12px 14px;
    background: #edf8ff;
    color: #25577d;
    font-weight: 900;
    text-align: center;
    margin-bottom: 16px;
}

.animal-message.success {
    background: #e6ffed;
    color: #16733b;
}

.animal-message.warn {
    background: #fff3df;
    color: #a45d00;
}

.animal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.animal-level-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.animal-level-button {
    height: 40px;
    border: none;
    border-radius: 14px;
    color: #17315b;
    background: #ffffff;
    font-weight: 1000;
    cursor: pointer;
    box-shadow: 0 6px 12px rgba(55, 73, 120, 0.10);
}

.animal-level-button.current {
    background: #557cff;
    color: #fff;
}

.animal-level-button.completed {
    background: #55d47d;
    color: #fff;
}

.animal-unlocked-row {
    display: grid;
    gap: 10px;
}

.animal-mini-card {
    display: grid;
    grid-template-columns: 52px 1fr;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.74);
    border-radius: 18px;
    padding: 9px;
}

.animal-mini-card strong {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    background: #fff;
    border-radius: 16px;
    font-size: 1.9rem;
}

.animal-mini-card span {
    color: #17315b;
    font-weight: 1000;
}

.animal-trophy {
    width: 86px;
    height: 86px;
    display: grid;
    place-items: center;
    margin: 0 auto 12px auto;
    border-radius: 28px;
    background: linear-gradient(135deg, #ffe06c, #ff9e43);
    font-size: 3rem;
    box-shadow: 0 14px 28px rgba(219, 126, 21, 0.22);
}

.orange-panel strong {
    display: block;
    color: #17315b;
    font-size: 2rem;
    font-weight: 1000;
}

@media (max-width: 1180px) {
    .animal-top-hud,
    .animal-layout {
        grid-template-columns: 1fr;
    }

    .animal-side-panel {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 760px) {
    .animal-game-shell {
        padding: 14px;
        border-radius: 22px;
    }

    .animal-side-panel,
    .animal-top-hud {
        grid-template-columns: 1fr;
    }

    .animal-photo-card {
        min-height: 380px;
    }

    .animal-hint-card {
        width: auto;
        left: 14px;
        right: 14px;
    }

    .animal-letter-bank {
        grid-template-columns: repeat(4, 1fr);
    }

    .animal-answer-box {
        width: 44px;
        height: 52px;
        font-size: 1.45rem;
    }
}

.flag-title {
    background: radial-gradient(circle at 10% 10%, rgba(255, 227, 82, 0.30), transparent 34%), linear-gradient(135deg, #0d5be1, #34c5ff);
    color: #ffffff;
}

.flag-game-shell {
    position: relative;
    padding: 22px;
    border-radius: 34px;
    background: radial-gradient(circle at 20% 10%, rgba(255, 233, 122, 0.45), transparent 30%), radial-gradient(circle at 85% 5%, rgba(128, 241, 255, 0.45), transparent 34%), linear-gradient(135deg, #e8fbff, #dfffe8 45%, #fff4ca);
    box-shadow: 0 20px 55px rgba(35, 84, 140, 0.18);
    overflow: hidden;
}

.flag-game-shell:before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.55) 2px, transparent 3px);
    background-size: 44px 44px;
    opacity: .32;
    pointer-events: none;
}

.flag-top-hud,
.flag-layout {
    position: relative;
    z-index: 1;
}

.flag-top-hud {
    display: grid;
    grid-template-columns: 1.7fr repeat(4, minmax(120px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.flag-logo,
.flag-hud-card {
    border-radius: 24px;
    background: rgba(10, 67, 154, 0.92);
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(25, 72, 144, 0.20);
    border: 2px solid rgba(255,255,255,0.22);
}

.flag-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
}

.flag-logo-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    background: linear-gradient(135deg, #ffe659, #48e27a);
    font-size: 2.4rem;
    box-shadow: inset 0 4px 10px rgba(255,255,255,.45);
}

.flag-logo strong {
    display: block;
    font-size: 1.65rem;
    font-weight: 1000;
    letter-spacing: .4px;
}

.flag-logo span:last-child {
    opacity: .88;
    font-weight: 800;
}

.flag-hud-card {
    padding: 14px 16px;
    text-align: center;
}

.flag-hud-card span {
    display: block;
    text-transform: uppercase;
    letter-spacing: .7px;
    font-size: .82rem;
    font-weight: 900;
    opacity: .86;
}

.flag-hud-card strong {
    display: block;
    font-size: 1.55rem;
    font-weight: 1000;
    margin-top: 4px;
}

.flag-hud-card.coins {
    background: linear-gradient(135deg, #ffb62e, #ff6a30);
}

.flag-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr) 280px;
    gap: 20px;
    align-items: start;
}

.flag-side-panel {
    display: grid;
    gap: 18px;
}

.flag-panel {
    border-radius: 28px;
    background: rgba(255,255,255,.92);
    border: 2px solid rgba(255,255,255,.75);
    box-shadow: 0 14px 28px rgba(51, 90, 140, .16);
    padding: 18px;
}

.flag-panel h3 {
    margin: 0 0 14px 0;
    color: #17315b;
    font-size: 1.15rem;
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.flag-panel p {
    color: #365278;
    font-weight: 700;
    line-height: 1.55;
    margin: 8px 0;
}

.flag-stat-row {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid rgba(65, 95, 140, .12);
}

.flag-stat-row:first-of-type {
    border-top: none;
}

.flag-stat-row > span {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: #f4fbff;
    font-size: 2rem;
}

.flag-stat-row b {
    display: block;
    color: #17315b;
    font-size: 1.7rem;
    font-weight: 1000;
}

.flag-stat-row small {
    display: block;
    color: #50617f;
    font-weight: 800;
}

.flag-main-panel {
    min-width: 0;
}

.flag-card-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 10px;
}

.flag-nav-btn {
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, #0f72ef, #45c8ff);
    font-size: 1.4rem;
    font-weight: 1000;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(27, 110, 205, .24);
}

.flag-level-medal {
    min-width: 120px;
    padding: 12px 22px;
    border-radius: 28px;
    background: linear-gradient(135deg, #ffd64d, #ff9f32);
    color: #743600;
    text-align: center;
    box-shadow: 0 16px 30px rgba(209, 111, 15, .22);
}

.flag-level-medal span {
    display: block;
    text-transform: uppercase;
    font-weight: 1000;
    font-size: .82rem;
}

.flag-level-medal strong {
    display: block;
    font-size: 2rem;
    font-weight: 1000;
}

.flag-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    flex-wrap: wrap;
    margin: 12px auto 18px auto;
}

.flag-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(23,49,91,.2);
    border: 2px solid #fff;
}

.flag-dots span.active {
    background: #1c78ff;
    transform: scale(1.22);
}

.flag-dots span.done {
    background: #44ca6a;
}

.flag-photo-card {
    position: relative;
    min-height: 430px;
    border-radius: 34px;
    background: radial-gradient(circle at center, #ffffff 0, #d9f2ff 38%, #2e80dc 100%);
    border: 8px solid #ffffff;
    box-shadow: 0 20px 42px rgba(44, 100, 168, .22);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.flag-photo-card:before {
    content: "";
    position: absolute;
    width: 680px;
    height: 680px;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.52) 0 10deg, rgba(255,255,255,.08) 10deg 20deg);
    opacity: .75;
}

.flag-question-pill {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    min-width: 230px;
    padding: 12px 24px;
    border-radius: 18px;
    background: linear-gradient(135deg, #0d5be1, #2dc3ff);
    color: #ffffff;
    text-align: center;
    font-size: 1.35rem;
    font-weight: 1000;
    box-shadow: 0 12px 24px rgba(24, 95, 180, .28);
}

.flag-picture {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    text-align: center;
}

.flag-big-emoji {
    display: block;
    font-size: clamp(8rem, 20vw, 15rem);
    filter: drop-shadow(0 22px 24px rgba(0,0,0,.20));
    animation: flagFloat 2.6s ease-in-out infinite;
}

.flag-country-shadow {
    position: absolute;
    right: -28px;
    bottom: -20px;
    width: 76px;
    height: 76px;
    border-radius: 26px;
    background: #ffffff;
    color: #0c59c9;
    display: grid;
    place-items: center;
    font-size: 2.4rem;
    font-weight: 1000;
    box-shadow: 0 16px 30px rgba(12,89,201,.22);
}

@keyframes flagFloat {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-8px) rotate(1deg); }
}

.flag-hint-card {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 20px;
    z-index: 2;
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 14px;
    align-items: center;
    background: rgba(255,255,255,.93);
    border-radius: 24px;
    padding: 14px 18px;
    box-shadow: 0 12px 25px rgba(44, 89, 130, .14);
}

.flag-hint-card > span {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    background: linear-gradient(135deg, #ffe85a, #62d86f);
    font-size: 2rem;
}

.flag-hint-card b {
    display: block;
    color: #17315b;
    font-weight: 1000;
    text-transform: uppercase;
}

.flag-hint-card p {
    margin: 4px 0 0 0;
    color: #33613e;
    font-size: 1.05rem;
    font-weight: 800;
}

.flag-answer-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    margin: 20px 0 18px 0;
}

.flag-answer-box {
    width: 48px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: #ffffff;
    color: #103f94;
    font-size: 1.55rem;
    font-weight: 1000;
    border: 4px solid #b7c5db;
    box-shadow: 0 7px 14px rgba(45, 82, 126, .14);
}

.flag-answer-box.revealed {
    border-color: #ffbd2f;
    background: #fff4c5;
}

.flag-letter-bank {
    display: grid;
    grid-template-columns: repeat(7, minmax(46px, 1fr));
    gap: 10px;
    margin: 0 auto;
    max-width: 650px;
}

.flag-letter-tile {
    min-height: 58px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff, #e5f3ff);
    color: #0f4daa;
    font-size: 1.45rem;
    font-weight: 1000;
    cursor: pointer;
    box-shadow: 0 10px 18px rgba(35, 89, 160, .20);
}

.flag-letter-tile:hover {
    transform: translateY(-2px);
}

.flag-letter-tile.selected,
.flag-letter-tile:disabled {
    opacity: .45;
    transform: none;
    cursor: default;
}

.flag-message {
    margin: 16px auto;
    padding: 12px 18px;
    border-radius: 18px;
    background: rgba(255,255,255,.86);
    color: #21446e;
    font-weight: 900;
    text-align: center;
    max-width: 660px;
}

.flag-message.good {
    background: #d9ffde;
    color: #087536;
}

.flag-message.bad {
    background: #ffe1e1;
    color: #b11e2c;
}

.flag-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.flag-info-panel {
    display: none;
    margin-top: 16px;
    border-radius: 30px;
    background: rgba(255,255,255,.95);
    border: 3px solid rgba(87, 181, 255, .55);
    padding: 18px;
    box-shadow: 0 16px 34px rgba(34, 82, 140, .18);
}

.flag-info-panel.visible {
    display: block;
    animation: popIn .22s ease-out;
}

.flag-info-header {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
}

.flag-info-header > span {
    width: 80px;
    height: 80px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #e9f8ff, #ffffff);
    font-size: 3.2rem;
    box-shadow: inset 0 0 0 3px rgba(54, 137, 228, .16);
}

.flag-info-header h3 {
    margin: 0;
    color: #0e3e91;
    font-size: 1.7rem;
    font-weight: 1000;
}

.flag-info-header p {
    margin: 4px 0 0 0;
    color: #4c5d74;
    font-weight: 800;
}

.flag-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.flag-info-grid div {
    padding: 14px;
    border-radius: 20px;
    background: linear-gradient(135deg, #f1fbff, #fff7e4);
}

.flag-info-grid strong {
    display: block;
    color: #17315b;
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .6px;
    font-weight: 1000;
    margin-bottom: 8px;
}

.flag-info-grid span {
    display: block;
    color: #324765;
    font-weight: 800;
    line-height: 1.45;
}

.flag-level-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.flag-level-button {
    height: 40px;
    border: none;
    border-radius: 14px;
    background: #ffffff;
    color: #17315b;
    font-weight: 1000;
    cursor: pointer;
    box-shadow: 0 6px 12px rgba(55, 73, 120, .10);
}

.flag-level-button.current {
    background: #1c78ff;
    color: #ffffff;
}

.flag-level-button.completed {
    background: #55d47d;
    color: #ffffff;
}

.flag-unlocked-row {
    display: grid;
    gap: 10px;
}

.flag-mini-card {
    display: grid;
    grid-template-columns: 58px 1fr;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.76);
    border-radius: 18px;
    padding: 9px;
}

.flag-mini-card strong {
    width: 58px;
    height: 46px;
    display: grid;
    place-items: center;
    background: #fff;
    border-radius: 16px;
    font-size: 2.1rem;
}

.flag-mini-card span {
    color: #17315b;
    font-weight: 1000;
    font-size: .92rem;
}

.flag-trophy {
    width: 86px;
    height: 86px;
    display: grid;
    place-items: center;
    margin: 0 auto 12px auto;
    border-radius: 28px;
    background: linear-gradient(135deg, #ffe06c, #ff9e43);
    font-size: 3rem;
    box-shadow: 0 14px 28px rgba(219, 126, 21, .22);
}

@keyframes popIn {
    from { transform: scale(.98); opacity: .1; }
    to { transform: scale(1); opacity: 1; }
}

@media (max-width: 1180px) {
    .flag-top-hud,
    .flag-layout {
        grid-template-columns: 1fr;
    }

    .flag-side-panel {
        grid-template-columns: repeat(2, 1fr);
    }

    .flag-info-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .flag-game-shell {
        padding: 14px;
        border-radius: 22px;
    }

    .flag-side-panel,
    .flag-top-hud {
        grid-template-columns: 1fr;
    }

    .flag-photo-card {
        min-height: 360px;
    }

    .flag-hint-card {
        left: 14px;
        right: 14px;
    }

    .flag-letter-bank {
        grid-template-columns: repeat(4, 1fr);
    }

    .flag-answer-box {
        width: 42px;
        height: 50px;
        font-size: 1.35rem;
    }
}

.flag-real-image {
    width: min(78%, 620px);
    aspect-ratio: 5 / 3;
    object-fit: cover;
    border-radius: 28px;
    border: 10px solid rgba(255,255,255,.95);
    box-shadow: 0 24px 42px rgba(0, 55, 120, .24), inset 0 0 0 1px rgba(255,255,255,.4);
    animation: flagFloat 2.6s ease-in-out infinite;
    background: #ffffff;
}

.flag-mini-card img {
    width: 58px;
    height: 38px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 5px 12px rgba(0,0,0,.15);
    background: #ffffff;
}

.flag-info-thumb {
    width: 70px;
    height: 46px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 8px 15px rgba(0,0,0,.12);
    background: #ffffff;
}

@media (max-width: 760px) {
    .flag-real-image {
        width: 92%;
        border-width: 7px;
        border-radius: 22px;
    }
}

.snl-game-shell {
    display: grid;
    gap: 24px;
}

.snl-hero-card {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 22px;
    align-items: center;
    padding: 24px;
    border-radius: 32px;
    background: linear-gradient(135deg, #effbe8 0%, #fff8d7 52%, #fff0d8 100%);
    box-shadow: 0 18px 44px rgba(37, 76, 128, .16);
    overflow: hidden;
}

.snl-hero-text h1 {
    margin: 10px 0 10px 0;
    font-size: clamp(2rem, 4vw, 4.2rem);
    line-height: .94;
    color: #17315b;
    font-weight: 1000;
}

.snl-hero-text p {
    margin: 0;
    color: #314768;
    font-size: 1.05rem;
    line-height: 1.65;
    font-weight: 700;
}

.snl-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.snl-hero-tags span {
    padding: 9px 13px;
    border-radius: 999px;
    color: #14315d;
    background: rgba(255,255,255,.82);
    font-weight: 900;
    box-shadow: 0 7px 14px rgba(42, 62, 100, .10);
}

.snl-hero-card img {
    width: 100%;
    border-radius: 28px;
    box-shadow: 0 22px 45px rgba(35, 68, 120, .20);
}

.snl-layout {
    display: grid;
    grid-template-columns: 290px minmax(520px, 1fr) 300px;
    gap: 22px;
    align-items: start;
}

.snl-panel,
.snl-board-wrap {
    border-radius: 28px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 18px 42px rgba(35, 68, 120, .14);
    border: 1px solid rgba(255,255,255,.84);
}

.snl-panel { padding: 18px; }

.snl-panel h2 {
    margin: 0 0 14px 0;
    color: #17315b;
    font-size: 1.45rem;
    font-weight: 1000;
}

.snl-field-label {
    display: block;
    margin: 12px 0 7px 0;
    color: #415470;
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .78rem;
}

.snl-select {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid #c8d9ff;
    border-radius: 16px;
    color: #17315b;
    background: #ffffff;
    font-weight: 900;
    outline: none;
}

.snl-check-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 10px;
    margin: 14px 0;
    padding: 12px;
    border-radius: 16px;
    background: #f3f7ff;
    color: #314768;
    font-weight: 800;
}

.snl-check-row input { width: 20px; height: 20px; margin-top: 1px; }

.snl-main-button,
.snl-roll-button {
    width: 100%; border: none; cursor: pointer; border-radius: 18px; font-weight: 1000; color: #ffffff;
    box-shadow: 0 12px 22px rgba(37, 97, 210, .22);
}
.snl-main-button { margin: 8px 0 16px 0; padding: 13px 16px; background: linear-gradient(135deg, #1d75ff, #6e52ff); }
.snl-roll-button { padding: 14px 16px; background: linear-gradient(135deg, #ffb31f, #ff5d5d); }
.snl-roll-button:disabled { opacity: .55; cursor: not-allowed; }

.snl-dice-box {
    display: grid; gap: 10px; padding: 15px; border-radius: 22px;
    background: linear-gradient(135deg, #f4fbff, #fff4d4); text-align: center;
}
.snl-dice-box span { color: #17315b; font-weight: 1000; }
.snl-dice {
    width: 92px; height: 92px; margin: 0 auto; display: grid; place-items: center;
    border-radius: 24px; background: #ffffff; color: #17315b; font-size: 3.1rem; font-weight: 1000;
    box-shadow: inset 0 -7px 0 #dfe9ff, 0 14px 28px rgba(62, 89, 130, .16); border: 4px solid #f2f6ff;
}
.snl-dice.shake { transform: rotate(-7deg) scale(1.05); }
.snl-message {
    margin-top: 15px; padding: 13px; border-radius: 18px; color: #17315b; background: #eff9e9; font-weight: 900; line-height: 1.45;
}

.snl-board-wrap { padding: 18px; background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(247,250,255,.95)); }
.snl-top-bar {
    display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 14px;
}
.snl-top-bar strong { display: block; color: #17315b; font-size: 1.35rem; font-weight: 1000; }
.snl-top-bar span { color: #4e6080; font-weight: 800; }
.snl-progress-pill { padding: 10px 14px; border-radius: 999px; background: #f2f6ff; color: #17315b; font-weight: 900; }

.snl-board-stage {
    padding: 18px; border-radius: 30px; background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.25), transparent 35%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,.18), transparent 30%),
        linear-gradient(135deg, #e5c18b, #c69355 48%, #b9793f 100%);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -6px 14px rgba(76,40,16,.28), 0 24px 42px rgba(92,53,20,.18);
}

.snl-board {
    position: relative;
    display: grid;
    grid-template-columns: repeat(10, minmax(45px, 1fr));
    aspect-ratio: 1 / 1;
    gap: 3px;
    padding: 12px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 30px 30px, rgba(255,255,255,.08), transparent 14px),
        linear-gradient(90deg, rgba(69,122,49,.10) 0 7px, transparent 7px 100%),
        linear-gradient(0deg, rgba(69,122,49,.10) 0 7px, transparent 7px 100%),
        linear-gradient(135deg, #f8e9c8 0%, #f1ddb7 100%);
    box-shadow: inset 0 0 0 6px rgba(120,77,36,.46), inset 0 0 0 12px rgba(255,255,255,.24), 0 16px 28px rgba(0,0,0,.18);
    overflow: hidden;
}

.snl-board::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      url('../Images/games/snakes-ladders/snakes-ladders-board-hq.png');
    background-size: cover;
    background-position: center;
    opacity: .08;
    pointer-events: none;
}

.snl-cell {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 0;
    border-radius: 8px;
    background: rgba(255,255,255,.28);
    border: 1px solid rgba(122,81,39,.36);
    color: #17315b;
    font-weight: 1000;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.06);
    overflow: hidden;
    backdrop-filter: blur(1.5px);
}
.snl-cell:nth-child(4n+1) { background: linear-gradient(135deg, rgba(57,161,255,.84), rgba(28,112,222,.92)); color:#fff; }
.snl-cell:nth-child(4n+2) { background: linear-gradient(135deg, rgba(144,214,86,.82), rgba(61,174,78,.92)); color:#fff; }
.snl-cell:nth-child(4n+3) { background: linear-gradient(135deg, rgba(255,154,89,.82), rgba(244,80,63,.94)); color:#fff; }
.snl-cell:nth-child(4n) { background: linear-gradient(135deg, rgba(187,144,255,.8), rgba(126,88,217,.92)); color:#fff; }

.snl-cell-number {
    position: absolute; left: 6px; top: 4px; font-size: clamp(.68rem, 1.15vw, .92rem); opacity: .96;
    text-shadow: 0 1px 1px rgba(0,0,0,.18);
}
.snl-cell-badge {
    position: absolute; right: 4px; bottom: 4px; min-width: 20px; height: 20px; display: grid; place-items: center;
    border-radius: 999px; background: rgba(255,255,255,.88); color: #17315b; font-size: .62rem; font-weight: 1000;
}
.snl-ladder-start .snl-cell-badge { background: #2ddf77; color:#fff; }
.snl-snake-start .snl-cell-badge { background: #ff4165; color:#fff; }
.snl-finish-cell { background: linear-gradient(135deg, #ffe66a, #ff9f29) !important; color: #17315b !important; }

.snl-path-layer { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3; }

.snl-ladder-shadow { stroke: rgba(82,48,18,.35); stroke-width: 7; stroke-linecap: round; }
.snl-ladder-rail { stroke: #8b5a2b; stroke-width: 6.5; stroke-linecap: round; }
.snl-ladder-rung { stroke: #b97c3b; stroke-width: 5.2; stroke-linecap: round; }

.snl-snake-shadow { fill: none; stroke: rgba(0,0,0,.18); stroke-width: 14; stroke-linecap: round; transform: translate(2px,2px); }
.snl-snake-body { fill:none; stroke-width: 12; stroke-linecap: round; }
.snl-snake-body.snake-1, .snl-snake-head.snake-1 { stroke:#62c036; fill:#76d44d; }
.snl-snake-body.snake-2, .snl-snake-head.snake-2 { stroke:#ffba2d; fill:#ffc857; }
.snl-snake-body.snake-3, .snl-snake-head.snake-3 { stroke:#7f5cff; fill:#9a7cff; }
.snl-snake-body.snake-4, .snl-snake-head.snake-4 { stroke:#25a2ff; fill:#46b6ff; }
.snl-snake-head { stroke-width: 3; }
.snl-snake-eye { fill:#1f2645; }
.snl-snake-tongue { fill:none; stroke:#ff4c66; stroke-width:2.2; stroke-linecap:round; }

.snl-token {
    position: absolute; z-index: 8; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #ffffff;
    border: 3px solid #ffffff; font-size: .85rem; font-weight: 1000; box-shadow: 0 7px 13px rgba(0,0,0,.22); transition: transform .18s ease;
}
.snl-token.token-0 { transform: translate(-13px, -13px); }
.snl-token.token-1 { transform: translate(12px, -13px); }
.snl-token.token-2 { transform: translate(-13px, 13px); }
.snl-token.token-3 { transform: translate(12px, 13px); }

.snl-players-list { display:grid; gap:11px; }
.snl-player-row { display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:center; padding:12px; border-radius:18px; background:#f5f8ff; border:2px solid transparent; }
.snl-player-row.active { background:#fff8da; border-color:#ffca3a; }
.snl-token-dot { width:28px; height:28px; border-radius:50%; border:3px solid #ffffff; box-shadow:0 5px 10px rgba(0,0,0,.16); }
.snl-player-row strong { display:block; color:#17315b; font-weight:1000; }
.snl-player-row span:not(.snl-token-dot) { display:block; color:#4e6080; font-weight:800; font-size:.85rem; line-height:1.35; }
.snl-help-card { margin-top:16px; padding:15px; border-radius:20px; background:linear-gradient(135deg, #eefaff, #fff8da); }
.snl-help-card h3 { margin:0 0 8px 0; color:#17315b; font-weight:1000; }
.snl-help-card ul { margin:0; padding-left:18px; color:#3d516f; font-weight:800; line-height:1.55; }
@media (max-width: 1180px) {
    .snl-layout,
    .snl-hero-card {
        grid-template-columns: 1fr;
    }

    .snl-layout {
        gap: 18px;
    }
}

@media (max-width: 720px) {
    .snl-hero-card,
    .snl-panel,
    .snl-board-wrap {
        border-radius: 22px;
        padding: 14px;
    }

    .snl-board-stage { padding: 10px; border-radius: 20px; }

    .snl-board {
        gap: 2px;
        padding: 7px;
        border-radius: 18px;
    }

    .snl-cell {
        border-radius: 8px;
    }

    .snl-cell-badge {
        display: none;
    }

    .snl-token {
        width: 22px;
        height: 22px;
        font-size: .72rem;
    }

    .snl-top-bar {
        display: grid;
    }
}


.angle-game-shell {
    display: grid;
    gap: 24px;
}

.angle-hero-card {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 22px;
    align-items: center;
    padding: 24px;
    border-radius: 32px;
    background: linear-gradient(135deg, #e7f8ff 0%, #fff3be 48%, #ffe1ec 100%);
    box-shadow: 0 18px 44px rgba(37,76,128,.16);
    overflow: hidden;
}

.angle-hero-text h1 {
    margin: 10px 0;
    font-size: clamp(2rem,4vw,4.2rem);
    line-height: .94;
    color: #17315b;
    font-weight: 1000;
}

.angle-hero-text p {
    margin: 0;
    color: #314768;
    font-size: 1.05rem;
    line-height: 1.65;
    font-weight: 700;
}

.angle-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.angle-hero-tags span {
    padding: 9px 13px;
    border-radius: 999px;
    color: #14315d;
    background: rgba(255,255,255,.84);
    font-weight: 900;
    box-shadow: 0 7px 14px rgba(42,62,100,.10);
}

.angle-hero-card img {
    width: 100%;
    border-radius: 28px;
    box-shadow: 0 22px 45px rgba(35,68,120,.20);
}

.angle-layout {
    display: grid;
    grid-template-columns: 285px minmax(560px,1fr) 290px;
    gap: 22px;
    align-items: start;
}

.angle-panel,
.angle-stage-card {
    border-radius: 28px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 18px 42px rgba(35,68,120,.14);
    border: 1px solid rgba(255,255,255,.84);
}

.angle-panel {
    padding: 18px;
}

.angle-panel h2 {
    margin: 0 0 14px 0;
    color: #17315b;
    font-size: 1.45rem;
    font-weight: 1000;
}

.angle-field-label {
    display: block;
    margin: 12px 0 7px 0;
    color: #415470;
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .78rem;
}

.angle-select {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid #c8d9ff;
    border-radius: 16px;
    color: #17315b;
    background: #fff;
    font-weight: 900;
    outline: none;
}

.angle-turn-card {
    display: grid;
    gap: 4px;
    margin: 15px 0;
    padding: 14px;
    border-radius: 20px;
    background: linear-gradient(135deg,#eff8ff,#fff8d8);
    color: #17315b;
    font-weight: 900;
}

.angle-turn-card strong {
    font-size: 1.4rem;
    font-weight: 1000;
}

.angle-slider-row {
    display: grid;
    grid-template-columns: 1fr 58px;
    gap: 10px;
    align-items: center;
}

.angle-slider-row input[type=range] {
    width: 100%;
    accent-color: #1d75ff;
}

.angle-slider-row strong {
    text-align: center;
    padding: 8px;
    border-radius: 12px;
    background: #f2f6ff;
    color: #17315b;
}

.angle-main-button,
.angle-secondary-button {
    width: 100%;
    border: none;
    cursor: pointer;
    border-radius: 18px;
    font-weight: 1000;
    color: #fff;
    box-shadow: 0 12px 22px rgba(37,97,210,.22);
}

.angle-main-button {
    margin: 18px 0 10px 0;
    padding: 15px 16px;
    background: linear-gradient(135deg,#ffb31f,#ff4d73);
}

.angle-secondary-button {
    padding: 13px 16px;
    color: #17315b;
    background: linear-gradient(135deg,#eaf5ff,#fff8da);
    border: 2px solid #d5e5ff;
}

.angle-main-button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.angle-message {
    margin-top: 15px;
    padding: 13px;
    border-radius: 18px;
    color: #17315b;
    background: #eff9e9;
    font-weight: 900;
    line-height: 1.45;
}

.angle-stage-card {
    padding: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(247,250,255,.95));
}

.angle-top-bar {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 14px;
}

.angle-top-bar strong {
    display: block;
    color: #17315b;
    font-size: 1.35rem;
    font-weight: 1000;
}

.angle-top-bar span {
    color: #4e6080;
    font-weight: 800;
}

.angle-wind-pill {
    padding: 10px 14px;
    border-radius: 999px;
    background: #fff3cd;
    color: #17315b;
    font-weight: 1000;
    white-space: nowrap;
}

.angle-canvas {
    width: 100%;
    display: block;
    border-radius: 24px;
    background: #dff8ff;
    box-shadow: inset 0 0 0 6px rgba(255,255,255,.24), 0 14px 28px rgba(35,68,120,.16);
}

.angle-help-list {
    display: grid;
    gap: 12px;
}

.angle-help-list div {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 10px;
    align-items: start;
    padding: 12px;
    border-radius: 18px;
    background: #f5f8ff;
}

.angle-help-list span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg,#1d75ff,#6e52ff);
    color: #fff;
    font-weight: 1000;
}

.angle-help-list p {
    margin: 0;
    color: #3d516f;
    font-weight: 800;
    line-height: 1.45;
}

.angle-stat-box {
    margin-top: 16px;
    padding: 15px;
    border-radius: 20px;
    background: linear-gradient(135deg,#eefaff,#fff8da);
}

.angle-stat-box strong,
.angle-stat-box span {
    display: block;
}

.angle-stat-box strong {
    color: #17315b;
    font-weight: 1000;
    margin-bottom: 6px;
}

.angle-stat-box span {
    color: #4e6080;
    font-weight: 900;
}

@media (max-width: 1180px) {
    .angle-layout,
    .angle-hero-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .angle-hero-card,
    .angle-panel,
    .angle-stage-card {
        border-radius: 22px;
        padding: 14px;
    }

    .angle-top-bar {
        display: grid;
    }
}


.parrot-game-shell {
    display: grid;
    gap: 24px;
}

.parrot-hero-card {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 24px;
    align-items: center;
    padding: 24px;
    border-radius: 32px;
    background: linear-gradient(135deg, #eaffd6 0%, #fff3c7 48%, #dff8ff 100%);
    box-shadow: 0 18px 44px rgba(37, 76, 128, .16);
    overflow: hidden;
}

.parrot-hero-text h1 {
    margin: 10px 0;
    font-size: clamp(2rem, 4vw, 4.2rem);
    line-height: .95;
    color: #174a25;
    font-weight: 1000;
}

.parrot-hero-text p {
    margin: 0;
    color: #314768;
    font-size: 1.05rem;
    line-height: 1.65;
    font-weight: 750;
}

.parrot-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.parrot-hero-tags span {
    padding: 9px 13px;
    border-radius: 999px;
    color: #174a25;
    background: rgba(255,255,255,.86);
    font-weight: 1000;
    box-shadow: 0 7px 14px rgba(42, 62, 100, .10);
}

.parrot-hero-card img {
    width: 100%;
    border-radius: 28px;
    box-shadow: 0 22px 45px rgba(35, 68, 120, .20);
}

.parrot-layout {
    display: grid;
    grid-template-columns: 310px minmax(520px, 1fr);
    gap: 22px;
    align-items: start;
}

.parrot-panel,
.parrot-stage-card {
    border-radius: 28px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 18px 42px rgba(35, 68, 120, .14);
    border: 1px solid rgba(255,255,255,.84);
}

.parrot-panel {
    padding: 18px;
}

.parrot-panel h2 {
    margin: 0 0 14px 0;
    color: #17315b;
    font-size: 1.45rem;
    font-weight: 1000;
}

.parrot-label {
    display: block;
    margin: 12px 0 7px 0;
    color: #415470;
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .78rem;
}

.parrot-select {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid #bde8a8;
    border-radius: 16px;
    color: #17315b;
    background: #ffffff;
    font-weight: 900;
    outline: none;
}

.parrot-main-button,
.parrot-soft-button {
    width: 100%;
    border: none;
    cursor: pointer;
    border-radius: 18px;
    font-weight: 1000;
    box-shadow: 0 12px 22px rgba(37, 97, 210, .20);
}

.parrot-main-button {
    margin: 14px 0 10px 0;
    padding: 14px 16px;
    color: #ffffff;
    background: linear-gradient(135deg, #23c85a, #ff9b21);
}

.parrot-soft-button {
    padding: 12px 16px;
    color: #174a25;
    background: linear-gradient(135deg, #eefbdd, #fff2c4);
}

.parrot-score-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 15px;
}

.parrot-score-grid div {
    padding: 12px;
    border-radius: 17px;
    background: linear-gradient(135deg, #f4fbff, #fff5d8);
    text-align: center;
}

.parrot-score-grid span {
    display: block;
    color: #4e6080;
    font-weight: 900;
    font-size: .78rem;
    text-transform: uppercase;
}

.parrot-score-grid strong {
    display: block;
    color: #174a25;
    font-size: 1.6rem;
    font-weight: 1000;
}

.parrot-help-card {
    margin-top: 16px;
    padding: 15px;
    border-radius: 20px;
    background: linear-gradient(135deg, #efffe7, #fff8da);
}

.parrot-help-card h3 {
    margin: 0 0 8px 0;
    color: #17315b;
    font-weight: 1000;
}

.parrot-help-card ul {
    margin: 0;
    padding-left: 18px;
    color: #3d516f;
    font-weight: 800;
    line-height: 1.55;
}

.parrot-stage-card {
    padding: 18px;
}

.parrot-topline {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
}

.parrot-topline strong {
    display: block;
    color: #17315b;
    font-size: 1.25rem;
    font-weight: 1000;
}

.parrot-topline span {
    display: block;
    color: #4e6080;
    font-weight: 850;
}

.parrot-stars {
    min-width: 220px;
    padding: 10px 14px;
    border-radius: 999px;
    background: #fff5d8;
    color: #ffb000;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 1000;
    letter-spacing: 1px;
}

.parrot-canvas-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    background: linear-gradient(135deg, #87e8ff, #b7f768);
    box-shadow: inset 0 0 0 6px rgba(255,255,255,.25), 0 18px 34px rgba(31, 89, 55, .18);
}

.parrot-canvas-wrap canvas {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

.parrot-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 24px;
    background: rgba(18, 77, 43, .48);
    backdrop-filter: blur(3px);
    color: #ffffff;
}

.parrot-overlay.hidden {
    display: none;
}

.parrot-overlay h2 {
    margin: 0;
    font-size: clamp(2rem, 5vw, 4.4rem);
    font-weight: 1000;
    text-shadow: 0 4px 12px rgba(0,0,0,.25);
}

.parrot-overlay p {
    margin: 10px 0 4px 0;
    font-size: 1.15rem;
    font-weight: 850;
}

.parrot-overlay .parrot-main-button {
    width: min(280px, 90%);
}

.parrot-mobile-controls {
    display: none;
    margin-top: 14px;
    text-align: center;
}

.parrot-mobile-controls button {
    width: 58px;
    height: 50px;
    margin: 4px;
    border: none;
    border-radius: 16px;
    color: #ffffff;
    background: linear-gradient(135deg, #1d75ff, #34c46b);
    font-size: 1.25rem;
    font-weight: 1000;
    box-shadow: 0 8px 16px rgba(37, 97, 210, .24);
}

@media (max-width: 1100px) {
    .parrot-layout,
    .parrot-hero-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .parrot-panel,
    .parrot-stage-card,
    .parrot-hero-card {
        border-radius: 22px;
        padding: 14px;
    }

    .parrot-topline {
        display: grid;
    }

    .parrot-stars {
        min-width: 0;
    }

    .parrot-mobile-controls {
        display: block;
    }
}


.wall-game-shell {
    display: grid;
    gap: 24px;
}

.wall-hero-card {
    display: grid;
    grid-template-columns: 1fr .95fr;
    gap: 24px;
    align-items: center;
    padding: 24px;
    border-radius: 34px;
    background: linear-gradient(135deg, #e7f8ff 0%, #f6efff 50%, #fff7d8 100%);
    box-shadow: 0 18px 44px rgba(37, 76, 128, .16);
    overflow: hidden;
}

.wall-hero-text h1 {
    margin: 10px 0;
    font-size: clamp(2.1rem, 4vw, 4.4rem);
    line-height: .92;
    color: #152f62;
    font-weight: 1000;
}

.wall-hero-text p {
    margin: 0;
    color: #33496d;
    font-size: 1.08rem;
    line-height: 1.65;
    font-weight: 750;
}

.wall-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.wall-hero-tags span {
    padding: 9px 13px;
    border-radius: 999px;
    background: rgba(255,255,255,.82);
    color: #17315b;
    font-weight: 950;
    box-shadow: 0 8px 16px rgba(40,70,120,.12);
}

.wall-hero-card img {
    width: 100%;
    border-radius: 28px;
    box-shadow: 0 22px 46px rgba(35, 68, 120, .22);
}

.wall-layout {
    display: grid;
    grid-template-columns: 315px minmax(620px, 1fr);
    gap: 22px;
    align-items: start;
}

.wall-panel,
.wall-stage-card {
    border-radius: 28px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 18px 42px rgba(35, 68, 120, .14);
    border: 1px solid rgba(255,255,255,.84);
}

.wall-panel {
    padding: 18px;
}

.wall-panel h2 {
    margin: 0 0 14px 0;
    color: #17315b;
    font-size: 1.45rem;
    font-weight: 1000;
}

.wall-field-label {
    display: block;
    margin: 12px 0 7px 0;
    color: #415470;
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .78rem;
}

.wall-select {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid #c8d9ff;
    border-radius: 16px;
    color: #17315b;
    background: #ffffff;
    font-weight: 900;
    outline: none;
}

.wall-main-button,
.wall-secondary-button {
    width: 100%;
    border: none;
    cursor: pointer;
    border-radius: 18px;
    font-weight: 1000;
    color: #ffffff;
    box-shadow: 0 12px 22px rgba(37, 97, 210, .22);
}

.wall-main-button {
    margin-top: 16px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #1d75ff, #6e52ff);
}

.wall-secondary-button {
    margin-top: 10px;
    padding: 13px 16px;
    background: linear-gradient(135deg, #ffb31f, #ff5d5d);
}

.wall-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 16px;
}

.wall-stat-grid div {
    padding: 13px;
    border-radius: 18px;
    background: linear-gradient(135deg, #f6fbff, #fff7dc);
    text-align: center;
}

.wall-stat-grid span {
    display: block;
    color: #55667f;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 950;
}

.wall-stat-grid strong {
    display: block;
    color: #17315b;
    font-size: 1.75rem;
    font-weight: 1000;
}

.wall-help-card {
    margin-top: 16px;
    padding: 15px;
    border-radius: 20px;
    background: linear-gradient(135deg, #eefaff, #fff8da);
    color: #3d516f;
    font-weight: 800;
    line-height: 1.55;
}

.wall-help-card h3 {
    margin: 0 0 8px 0;
    color: #17315b;
    font-weight: 1000;
}

.wall-help-card p {
    margin: 0 0 8px 0;
}

.wall-help-card ul {
    margin: 0;
    padding-left: 18px;
}

.wall-stage-card {
    padding: 18px;
}

.wall-topline {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 14px;
}

.wall-topline strong {
    display: block;
    color: #17315b;
    font-size: 1.35rem;
    font-weight: 1000;
}

.wall-topline span {
    color: #4e6080;
    font-weight: 800;
}

.wall-badge {
    padding: 10px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #1d75ff, #20c7ff);
    color: #ffffff;
    font-weight: 1000;
    box-shadow: 0 10px 20px rgba(37,117,255,.20);
}

.wall-canvas-wrap {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    background: #07183d;
    box-shadow: inset 0 0 0 5px rgba(255,255,255,.10), 0 20px 38px rgba(10,26,70,.20);
}

.wall-canvas-wrap canvas {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

.wall-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 14px;
    padding: 22px;
    text-align: center;
    background: radial-gradient(circle at center, rgba(13,37,89,.38), rgba(13,37,89,.86));
    color: #ffffff;
}

.wall-overlay h2 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 1000;
    text-shadow: 0 6px 15px rgba(0,0,0,.30);
}

.wall-overlay p {
    max-width: 620px;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 850;
    line-height: 1.5;
}

.wall-overlay .wall-main-button {
    width: min(280px, 90%);
    margin-top: 0;
}

.wall-mobile-controls {
    display: none;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 14px;
}

.wall-mobile-controls div {
    display: grid;
    grid-template-columns: 1fr 58px 58px;
    gap: 8px;
    align-items: center;
    padding: 10px;
    border-radius: 18px;
    background: #f3f7ff;
}

.wall-mobile-controls span {
    color: #17315b;
    font-weight: 1000;
}

.wall-mobile-controls button {
    width: 58px;
    height: 50px;
    border: none;
    border-radius: 16px;
    color: #ffffff;
    background: linear-gradient(135deg, #1d75ff, #6e52ff);
    font-size: 1.25rem;
    font-weight: 1000;
    box-shadow: 0 8px 16px rgba(37, 97, 210, .24);
}

@media (max-width: 1120px) {
    .wall-layout,
    .wall-hero-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .wall-panel,
    .wall-stage-card,
    .wall-hero-card {
        border-radius: 22px;
        padding: 14px;
    }

    .wall-topline {
        display: grid;
    }

    .wall-mobile-controls {
        display: grid;
    }

    .wall-mobile-controls div {
        grid-template-columns: 1fr 50px 50px;
    }

    .wall-mobile-controls button {
        width: 50px;
    }
}


.sea-game-shell {
    display: grid;
    gap: 24px;
}

.sea-hero-card {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 24px;
    align-items: center;
    padding: 24px;
    border-radius: 34px;
    background: radial-gradient(circle at 15% 10%, rgba(125, 249, 255, .34), transparent 33%), linear-gradient(135deg, #053f8d 0%, #0bb7d8 55%, #7df5c8 100%);
    color: #ffffff;
    box-shadow: 0 22px 52px rgba(4, 65, 120, .22);
    overflow: hidden;
}

.sea-hero-text h1 {
    margin: 10px 0;
    color: #ffffff;
    font-size: clamp(2.2rem, 5vw, 4.7rem);
    line-height: .92;
    font-weight: 1000;
    text-shadow: 0 5px 14px rgba(0,0,0,.22);
}

.sea-hero-text p {
    margin: 0;
    color: rgba(255,255,255,.94);
    font-size: 1.08rem;
    line-height: 1.68;
    font-weight: 750;
}

.sea-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.sea-hero-tags span {
    padding: 9px 13px;
    border-radius: 999px;
    color: #07315c;
    background: rgba(255,255,255,.86);
    font-weight: 1000;
    box-shadow: 0 8px 16px rgba(0, 38, 88, .16);
}

.sea-hero-card img {
    width: 100%;
    border-radius: 28px;
    border: 6px solid rgba(255,255,255,.72);
    box-shadow: 0 22px 46px rgba(0, 44, 90, .24);
}

.sea-layout {
    display: grid;
    grid-template-columns: 315px minmax(620px, 1fr);
    gap: 22px;
    align-items: start;
}

.sea-panel,
.sea-stage-card {
    border-radius: 30px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 18px 42px rgba(35, 68, 120, .14);
    border: 1px solid rgba(255,255,255,.84);
}

.sea-panel {
    padding: 18px;
}

.sea-panel h2 {
    margin: 0 0 14px 0;
    color: #093c75;
    font-size: 1.45rem;
    font-weight: 1000;
}

.sea-label {
    display: block;
    margin: 12px 0 7px 0;
    color: #415470;
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .78rem;
}

.sea-select {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid #abe8ff;
    border-radius: 16px;
    color: #093c75;
    background: #ffffff;
    font-weight: 900;
    outline: none;
}

.sea-main-button,
.sea-soft-button,
.sea-sound-button {
    width: 100%;
    border: none;
    cursor: pointer;
    border-radius: 18px;
    font-weight: 1000;
    box-shadow: 0 12px 22px rgba(37, 97, 210, .20);
}

.sea-main-button {
    margin: 14px 0 10px 0;
    padding: 14px 16px;
    color: #ffffff;
    background: linear-gradient(135deg, #18c8ff, #0b73ff);
}

.sea-soft-button {
    margin-bottom: 10px;
    padding: 12px 16px;
    color: #083464;
    background: linear-gradient(135deg, #e8fbff, #ffffff);
    border: 2px solid #c9edff;
}

.sea-sound-button {
    padding: 12px 16px;
    color: #ffffff;
    background: linear-gradient(135deg, #05c793, #00a6ff);
}

.sea-score-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 15px;
}

.sea-score-grid div {
    padding: 12px;
    border-radius: 17px;
    background: linear-gradient(135deg, #f4fbff, #fff8db);
    text-align: center;
}

.sea-score-grid span {
    display: block;
    color: #53677f;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 950;
}

.sea-score-grid strong {
    display: block;
    color: #083464;
    font-size: 1.65rem;
    font-weight: 1000;
}

.sea-help-card {
    margin-top: 16px;
    padding: 15px;
    border-radius: 20px;
    background: linear-gradient(135deg, #eefaff, #fff8da);
    color: #3d516f;
    font-weight: 800;
    line-height: 1.55;
}

.sea-help-card h3 {
    margin: 0 0 8px 0;
    color: #093c75;
    font-weight: 1000;
}

.sea-help-card ul {
    margin: 0;
    padding-left: 18px;
}

.sea-stage-card {
    padding: 18px;
}

.sea-topline {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 14px;
}

.sea-topline strong {
    display: block;
    color: #093c75;
    font-size: 1.35rem;
    font-weight: 1000;
}

.sea-topline span {
    color: #4e6080;
    font-weight: 800;
}

.sea-stars {
    min-width: 235px;
    padding: 10px 14px;
    border-radius: 999px;
    background: #fff8da;
    color: #ffb800;
    text-align: center;
    font-size: 1.18rem;
    font-weight: 1000;
    letter-spacing: 1px;
}

.sea-canvas-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background: #053f8d;
    box-shadow: inset 0 0 0 6px rgba(255,255,255,.17), 0 20px 38px rgba(3, 54, 100, .24);
}

.sea-canvas-wrap canvas {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

.sea-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 14px;
    padding: 24px;
    text-align: center;
    background: radial-gradient(circle at center, rgba(4, 89, 150, .34), rgba(0, 28, 72, .82));
    color: #ffffff;
    backdrop-filter: blur(2px);
}

.sea-overlay.hidden {
    display: none;
}

.sea-overlay h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(2.1rem, 5vw, 4.6rem);
    font-weight: 1000;
    text-shadow: 0 6px 16px rgba(0,0,0,.30);
}

.sea-overlay p {
    max-width: 620px;
    margin: 0 0 10px 0;
    font-size: 1.15rem;
    font-weight: 850;
    line-height: 1.5;
}

.sea-overlay .sea-main-button {
    width: min(300px, 90%);
    margin-top: 0;
}

.sea-mobile-controls {
    display: none;
    margin-top: 14px;
    text-align: center;
}

.sea-mobile-controls button {
    width: 58px;
    height: 50px;
    margin: 4px;
    border: none;
    border-radius: 16px;
    color: #ffffff;
    background: linear-gradient(135deg, #0b73ff, #18c8ff);
    font-size: 1.25rem;
    font-weight: 1000;
    box-shadow: 0 8px 16px rgba(37, 97, 210, .24);
}

@media (max-width: 1120px) {
    .sea-layout,
    .sea-hero-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .sea-panel,
    .sea-stage-card,
    .sea-hero-card {
        border-radius: 22px;
        padding: 14px;
    }

    .sea-topline {
        display: grid;
    }

    .sea-stars {
        min-width: 0;
    }

    .sea-mobile-controls {
        display: block;
    }
}


.ship-game-shell {
    display: grid;
    gap: 24px;
}

.ship-hero-card {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 24px;
    align-items: center;
    padding: 24px;
    border-radius: 34px;
    background: radial-gradient(circle at 12% 12%, rgba(255,230,116,.34), transparent 34%), linear-gradient(135deg, #dff7ff 0%, #e8f2ff 48%, #fff3d7 100%);
    box-shadow: 0 18px 44px rgba(37, 76, 128, .16);
    overflow: hidden;
}

.ship-hero-text h1 {
    margin: 10px 0;
    font-size: clamp(2.1rem, 4vw, 4.4rem);
    line-height: .92;
    color: #12335f;
    font-weight: 1000;
}

.ship-hero-text p {
    margin: 0;
    color: #33496d;
    font-size: 1.08rem;
    line-height: 1.65;
    font-weight: 750;
}

.ship-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.ship-hero-tags span {
    padding: 9px 13px;
    border-radius: 999px;
    background: rgba(255,255,255,.84);
    color: #17315b;
    font-weight: 950;
    box-shadow: 0 8px 16px rgba(40,70,120,.12);
}

.ship-hero-card img {
    width: 100%;
    border-radius: 28px;
    box-shadow: 0 22px 46px rgba(35, 68, 120, .22);
}

.ship-layout {
    display: grid;
    grid-template-columns: 315px minmax(640px, 1fr);
    gap: 22px;
    align-items: start;
}

.ship-panel,
.ship-stage-card {
    border-radius: 28px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 18px 42px rgba(35, 68, 120, .14);
    border: 1px solid rgba(255,255,255,.84);
}

.ship-panel {
    padding: 18px;
}

.ship-panel h2 {
    margin: 0 0 14px 0;
    color: #17315b;
    font-size: 1.45rem;
    font-weight: 1000;
}

.ship-label {
    display: block;
    margin: 12px 0 7px 0;
    color: #415470;
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .78rem;
}

.ship-select {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid #b9ddff;
    border-radius: 16px;
    color: #17315b;
    background: #ffffff;
    font-weight: 900;
    outline: none;
}

.ship-main-button,
.ship-soft-button,
.ship-control-button,
.ship-fire-button {
    border: none;
    cursor: pointer;
    border-radius: 18px;
    font-weight: 1000;
    box-shadow: 0 12px 22px rgba(37, 97, 210, .22);
}

.ship-main-button {
    width: 100%;
    margin-top: 16px;
    padding: 14px 16px;
    color: #ffffff;
    background: linear-gradient(135deg, #0b7dff, #0ad2ff);
}

.ship-soft-button {
    width: 100%;
    margin-top: 10px;
    padding: 13px 16px;
    color: #14315d;
    background: linear-gradient(135deg, #eefaff, #fff8da);
}

.ship-score-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 16px;
}

.ship-score-grid div {
    padding: 13px;
    border-radius: 18px;
    background: linear-gradient(135deg, #f6fbff, #fff7dc);
    text-align: center;
}

.ship-score-grid span {
    display: block;
    color: #55667f;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 950;
}

.ship-score-grid strong {
    display: block;
    color: #17315b;
    font-size: 1.7rem;
    font-weight: 1000;
}

.ship-help-card {
    margin-top: 16px;
    padding: 15px;
    border-radius: 20px;
    background: linear-gradient(135deg, #eefaff, #fff8da);
    color: #3d516f;
    font-weight: 800;
    line-height: 1.55;
}

.ship-help-card h3 {
    margin: 0 0 8px 0;
    color: #17315b;
    font-weight: 1000;
}

.ship-help-card ul {
    margin: 0;
    padding-left: 18px;
}

.ship-stage-card {
    padding: 18px;
}

.ship-topline {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 14px;
}

.ship-topline strong {
    display: block;
    color: #17315b;
    font-size: 1.35rem;
    font-weight: 1000;
}

.ship-topline span {
    color: #4e6080;
    font-weight: 800;
}

.ship-badge {
    padding: 10px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #0b7dff, #13c6ff);
    color: #ffffff;
    font-weight: 1000;
    box-shadow: 0 10px 20px rgba(37,117,255,.20);
}

.ship-canvas-wrap {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    background: #061428;
    box-shadow: inset 0 0 0 5px rgba(255,255,255,.10), 0 20px 38px rgba(10,26,70,.20);
    border: 6px solid rgba(255,255,255,.92);
}

.ship-canvas-wrap canvas {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

.ship-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 14px;
    padding: 22px;
    text-align: center;
    background: radial-gradient(circle at center, rgba(11,45,91,.30), rgba(3,16,33,.88));
    color: #ffffff;
}

.ship-overlay.hidden {
    display: none;
}

.ship-overlay h2 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 1000;
    text-shadow: 0 6px 15px rgba(0,0,0,.30);
}

.ship-overlay p {
    max-width: 640px;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 850;
    line-height: 1.5;
}

.ship-overlay .ship-main-button {
    width: min(290px, 90%);
    margin-top: 0;
}

.ship-control-row {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 12px;
    margin-top: 14px;
}

.ship-control-button {
    min-height: 54px;
    background: linear-gradient(135deg, #e9f5ff, #ffffff);
    color: #17315b;
}

.ship-fire-button {
    min-height: 58px;
    color: #ffffff;
    background: linear-gradient(135deg, #c8132a, #ff4f64);
    font-size: 1.25rem;
    letter-spacing: .08em;
}

.ship-mobile-controls {
    display: none;
    gap: 8px;
    justify-items: center;
    margin-top: 14px;
}

.ship-mobile-controls div {
    display: flex;
    gap: 8px;
}

.ship-mobile-controls button {
    width: 58px;
    height: 50px;
    border: none;
    border-radius: 16px;
    color: #ffffff;
    background: linear-gradient(135deg, #0b7dff, #12cfff);
    font-size: 1.25rem;
    font-weight: 1000;
    box-shadow: 0 8px 16px rgba(37, 97, 210, .24);
}

@media (max-width: 1120px) {
    .ship-layout,
    .ship-hero-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .ship-panel,
    .ship-stage-card,
    .ship-hero-card {
        border-radius: 22px;
        padding: 14px;
    }

    .ship-topline {
        display: grid;
    }

    .ship-control-row {
        grid-template-columns: 1fr;
    }

    .ship-mobile-controls {
        display: grid;
    }
}

.story-game-shell {
    display: grid;
    gap: 26px;
}

.story-hero-card {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 24px;
    align-items: center;
    padding: 26px;
    border-radius: 34px;
    background: linear-gradient(135deg, #fff8df, #eef7ff 58%, #f4efff);
    box-shadow: 0 24px 60px rgba(31, 42, 68, 0.16);
    overflow: hidden;
}

.story-hero-text h1 {
    margin: 8px 0 12px 0;
    color: #14284d;
    font-size: clamp(34px, 5vw, 62px);
    line-height: 1.03;
    font-weight: 1000;
}

.story-hero-text p {
    margin: 0;
    color: #52617d;
    font-size: 18px;
    line-height: 1.65;
    max-width: 780px;
}

.story-hero-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 28px;
    box-shadow: 0 18px 34px rgba(31, 42, 68, 0.18);
}

.story-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.story-hero-tags span,
.story-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 13px;
    border-radius: 999px;
    background: #ffffff;
    color: #17315b;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(31, 42, 68, 0.08);
}

.story-game-layout {
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.story-side-panel,
.story-stage-card {
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 42px rgba(31, 42, 68, 0.13);
    border: 1px solid rgba(210, 222, 255, 0.9);
}

.story-side-panel {
    position: sticky;
    top: 18px;
    padding: 20px;
}

.story-side-panel h2,
.story-section-title,
.story-reading-panel h2 {
    margin: 0 0 14px 0;
    color: #14284d;
    font-weight: 1000;
}

.story-select {
    width: 100%;
    min-height: 48px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 2px solid #dfe7ff;
    border-radius: 16px;
    color: #17315b;
    background: #ffffff;
    font-weight: 800;
    outline: none;
}

.story-main-button,
.story-soft-button {
    width: 100%;
    min-height: 48px;
    margin: 6px 0;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 1000;
}

.story-main-button {
    color: #ffffff;
    background: linear-gradient(135deg, #6757ff, #00a6ff);
    box-shadow: 0 12px 24px rgba(77, 93, 255, 0.22);
}

.story-soft-button {
    color: #17315b;
    background: #eef5ff;
    box-shadow: inset 0 -3px 0 rgba(31, 42, 68, 0.07);
}

.story-main-button:hover,
.story-soft-button:hover,
.story-picture-card:hover,
.story-slot:hover {
    transform: translateY(-2px);
}

.story-score-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 16px 0;
}

.story-score-grid div {
    padding: 13px;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #f3f7ff);
    border: 1px solid #dfe7ff;
    text-align: center;
}

.story-score-grid span {
    display: block;
    color: #66728c;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.story-score-grid strong {
    display: block;
    margin-top: 4px;
    color: #14284d;
    font-size: 25px;
}

.story-help-card {
    padding: 16px;
    border-radius: 22px;
    background: linear-gradient(135deg, #fff7cd, #ffffff);
    color: #31405f;
}

.story-help-card h3 {
    margin: 0 0 8px 0;
    color: #14284d;
}

.story-help-card ul {
    margin: 0;
    padding-left: 18px;
    line-height: 1.6;
}

.story-stage-card {
    padding: 22px;
    min-width: 0;
}

.story-topline {
    display: flex;
    gap: 14px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.story-topline strong {
    display: block;
    color: #14284d;
    font-size: clamp(22px, 3vw, 34px);
    font-weight: 1000;
}

.story-topline span {
    display: block;
    color: #52617d;
    font-weight: 800;
}

.story-message {
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 20px;
    background: #eef8ff;
    color: #17315b;
    font-weight: 900;
}

.story-order-board {
    display: grid;
    grid-template-columns: repeat(5, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.story-slot,
.story-picture-card {
    border: none;
    text-align: left;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.story-slot {
    position: relative;
    min-height: 260px;
    padding: 10px;
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff, #f7f9ff);
    border: 3px dashed #b9c8ee;
    box-shadow: 0 10px 22px rgba(31, 42, 68, 0.09);
    overflow: hidden;
}

.story-slot.right {
    border-style: solid;
    border-color: #43c27d;
    background: linear-gradient(180deg, #effff5, #ffffff);
}

.story-slot.wrong {
    border-style: solid;
    border-color: #ff6b6b;
    background: linear-gradient(180deg, #fff0f0, #ffffff);
}

.story-slot-number {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(135deg, #17315b, #6757ff);
    font-size: 18px;
    font-weight: 1000;
    box-shadow: 0 8px 18px rgba(23, 49, 91, 0.24);
}

.story-empty-text {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 230px;
    text-align: center;
    color: #70809d;
    font-weight: 1000;
}

.story-slot img,
.story-picture-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}

.story-card-title {
    display: inline-flex;
    margin: 10px 0 6px 0;
    padding: 5px 9px;
    border-radius: 999px;
    background: #fff1b8;
    color: #725300;
    font-size: 12px;
    font-weight: 1000;
}

.story-card-words {
    display: block;
    margin-top: 8px;
    color: #263957;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 800;
}

.story-action-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.story-card-bank {
    display: grid;
    grid-template-columns: repeat(5, minmax(130px, 1fr));
    gap: 14px;
}

.story-picture-card {
    min-height: 250px;
    padding: 12px;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 12px 24px rgba(31, 42, 68, 0.11);
    border: 1px solid #dfe7ff;
}

.story-reading-panel {
    margin-top: 22px;
    padding: 18px;
    border-radius: 24px;
    background: linear-gradient(135deg, #fff9dd, #ecfff4);
    color: #263957;
}

.story-reading-panel:empty {
    display: none;
}

.story-reading-panel ol {
    margin: 0;
    padding-left: 22px;
    line-height: 1.8;
    font-weight: 800;
}

@media (max-width: 1100px) {
    .story-hero-card,
    .story-game-layout {
        grid-template-columns: 1fr;
    }

    .story-side-panel {
        position: static;
    }

    .story-order-board,
    .story-card-bank {
        grid-template-columns: repeat(3, minmax(130px, 1fr));
    }
}

@media (max-width: 700px) {
    .story-hero-card,
    .story-stage-card,
    .story-side-panel {
        padding: 16px;
        border-radius: 24px;
    }

    .story-topline,
    .story-action-row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .story-order-board,
    .story-card-bank {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
        gap: 10px;
    }

    .story-slot,
    .story-picture-card {
        min-height: 230px;
    }
}

@media (max-width: 420px) {
    .story-order-board,
    .story-card-bank {
        grid-template-columns: 1fr;
    }
}


/* Step 40 - Face Maker Studio */
.face-maker-shell {
    max-width: 1320px;
    margin: 0 auto;
    padding: 18px 0 42px 0;
}

.face-maker-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 24px;
    align-items: center;
    padding: 24px;
    border-radius: 34px;
    background: radial-gradient(circle at 20% 10%, rgba(255, 231, 116, 0.55), transparent 34%), linear-gradient(135deg, #f2fbff, #fff4e2 48%, #f5eaff);
    box-shadow: 0 24px 70px rgba(31, 42, 68, 0.14);
    overflow: hidden;
}

.face-maker-hero h1 {
    margin: 10px 0 12px 0;
    font-size: clamp(34px, 5vw, 62px);
    color: #17315b;
    line-height: 1.02;
}

.face-maker-hero p {
    margin: 0;
    color: #52617d;
    font-size: 18px;
    line-height: 1.7;
}

.face-maker-hero img {
    width: 100%;
    min-height: 310px;
    object-fit: cover;
    border-radius: 28px;
    box-shadow: 0 22px 45px rgba(37, 52, 94, 0.22);
}

.face-maker-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.face-maker-tags span,
.face-maker-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 8px 13px;
    background: #ffffff;
    color: #17315b;
    font-weight: 900;
    box-shadow: 0 9px 18px rgba(31, 42, 68, 0.08);
}

.face-maker-layout {
    display: grid;
    grid-template-columns: minmax(330px, 430px) minmax(0, 1fr);
    gap: 24px;
    margin-top: 24px;
}

.face-maker-panel,
.face-maker-stage {
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 24px 65px rgba(31, 42, 68, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.82);
}

.face-maker-panel {
    padding: 20px;
}

.face-maker-panel-title h2,
.face-maker-help h3 {
    margin: 0 0 6px 0;
    color: #17315b;
}

.face-maker-panel-title p,
.face-maker-help p {
    margin: 0;
    color: #52617d;
    line-height: 1.6;
}

.face-option-groups {
    display: grid;
    gap: 16px;
    margin-top: 18px;
}

.face-option-group {
    padding: 14px;
    border-radius: 22px;
    background: linear-gradient(180deg, #f8fbff, #fffaf0);
    border: 1px solid #e9efff;
}

.face-option-group h3 {
    margin: 0 0 10px 0;
    color: #17315b;
    font-size: 16px;
}

.face-option-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.face-choice {
    position: relative;
    min-height: 72px;
    border: 3px solid transparent;
    border-radius: 17px;
    background: #ffffff;
    cursor: pointer;
    box-shadow: 0 8px 16px rgba(31, 42, 68, 0.08);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden;
}

.face-choice:hover,
.face-choice.selected {
    transform: translateY(-2px);
    border-color: #7057ff;
    box-shadow: 0 12px 22px rgba(112, 87, 255, 0.18);
}

.face-choice img {
    width: 100%;
    height: 58px;
    object-fit: contain;
    display: block;
    transform: scale(1.18);
}

.face-choice span {
    position: absolute;
    top: 5px;
    right: 6px;
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #17315b;
    color: #ffffff;
    font-size: 11px;
    font-weight: 1000;
}

.face-maker-stage {
    padding: 22px;
}

.face-maker-topline {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 18px;
}

.face-maker-topline strong {
    display: block;
    color: #17315b;
    font-size: 24px;
}

.face-maker-topline span {
    color: #52617d;
}

.face-preview-card {
    border-radius: 34px;
    padding: 18px;
    background: radial-gradient(circle at 50% 28%, #ffffff, #f2f7ff 48%, #fff2df 100%);
    border: 3px solid #ffffff;
    box-shadow: inset 0 0 0 1px rgba(23, 49, 91, 0.05), 0 14px 30px rgba(31, 42, 68, 0.10);
}

.face-preview {
    position: relative;
    width: min(100%, 640px);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    border-radius: 34px;
    overflow: hidden;
    background: linear-gradient(135deg, #e6fbff, #fff7d7 50%, #f6e9ff);
}

.face-preview-glow {
    position: absolute;
    inset: 9%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(112, 87, 255, 0.18), rgba(0, 166, 255, 0.10), transparent 68%);
}

.face-piece {
    position: absolute;
    left: 50%;
    height: auto;
    max-width: none;
    object-fit: contain;
    object-position: center center;
    user-select: none;
    pointer-events: none;
    transform: translateX(-50%);
}

.face-piece-ear-left {
    width: 16%;
    left: 16%;
    top: 30%;
    z-index: 1;
    transform: none;
}

.face-piece-ear-right {
    width: 16%;
    left: auto;
    right: 16%;
    top: 30%;
    z-index: 1;
    transform: none;
}

.face-piece-face {
    width: 57%;
    top: 12%;
    z-index: 2;
}

.face-piece-hat {
    width: 57%;
    top: 2%;
    z-index: 3;
    object-position: top center;
}

.face-piece-eyes {
    width: 33%;
    top: 42%;
    z-index: 4;
}

.face-piece-nose {
    width: 16%;
    top: 50%;
    z-index: 5;
}

.face-piece-moustache {
    width: 32%;
    top: 59%;
    z-index: 6;
}

.face-piece-mouth {
    width: 23%;
    top: 68%;
    z-index: 7;
}

.face-maker-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.face-main-button,
.face-soft-button {
    min-height: 50px;
    border: none;
    border-radius: 999px;
    padding: 0 22px;
    font-size: 16px;
    font-weight: 1000;
    cursor: pointer;
}

.face-main-button {
    color: #ffffff;
    background: linear-gradient(135deg, #7057ff, #00a6ff);
    box-shadow: 0 14px 26px rgba(0, 128, 255, 0.22);
}

.face-soft-button {
    color: #17315b;
    background: #eef4ff;
}

.face-maker-help {
    margin-top: 18px;
    padding: 16px;
    border-radius: 22px;
    background: #fff8da;
}

@media (max-width: 980px) {
    .face-maker-hero,
    .face-maker-layout {
        grid-template-columns: 1fr;
    }

    .face-maker-panel {
        order: 2;
    }

    .face-maker-stage {
        order: 1;
    }
}

@media (max-width: 560px) {
    .face-maker-shell {
        padding-top: 8px;
    }

    .face-maker-hero,
    .face-maker-panel,
    .face-maker-stage {
        border-radius: 24px;
        padding: 15px;
    }

    .face-option-row {
        grid-template-columns: repeat(5, 1fr);
        gap: 5px;
    }

    .face-choice {
        min-height: 58px;
        border-radius: 13px;
    }

    .face-choice img {
        height: 45px;
    }

    .face-maker-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}


/* Step 47 - Mountain Reveal Quiz */
.mountain-reveal-shell {
    max-width: 1320px;
    margin: 0 auto;
    padding: 18px 0 42px 0;
}

.mountain-reveal-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 24px;
    align-items: center;
    padding: 24px;
    border-radius: 34px;
    background: radial-gradient(circle at 18% 12%, rgba(129, 236, 236, 0.50), transparent 34%), linear-gradient(135deg, #effbff, #f4fff1 48%, #fff0df);
    box-shadow: 0 24px 70px rgba(31, 42, 68, 0.14);
    overflow: hidden;
}

.mountain-reveal-hero h1 {
    margin: 10px 0 12px 0;
    font-size: clamp(34px, 5vw, 62px);
    color: #17315b;
    line-height: 1.02;
}

.mountain-reveal-hero p {
    margin: 0;
    color: #52617d;
    font-size: 18px;
    line-height: 1.7;
}

.mountain-reveal-hero img {
    width: 100%;
    min-height: 310px;
    object-fit: cover;
    border-radius: 28px;
    box-shadow: 0 22px 45px rgba(37, 52, 94, 0.22);
}

.mountain-reveal-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.mountain-reveal-tags span,
#mountainBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 8px 13px;
    background: #ffffff;
    color: #17315b;
    font-weight: 900;
    box-shadow: 0 9px 18px rgba(31, 42, 68, 0.08);
}

.mountain-reveal-layout {
    display: grid;
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
    gap: 24px;
    margin-top: 24px;
}

.mountain-control-card,
.mountain-game-card {
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 24px 65px rgba(31, 42, 68, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.82);
}

.mountain-control-card {
    padding: 22px;
}

.mountain-control-card h2 {
    margin: 0 0 14px 0;
    color: #17315b;
}

.mountain-control-card label {
    display: block;
    margin: 14px 0 7px 0;
    color: #17315b;
    font-weight: 900;
}

.mountain-control-card select {
    width: 100%;
    min-height: 48px;
    border: 2px solid #dfe8ff;
    border-radius: 16px;
    background: #ffffff;
    color: #17315b;
    padding: 0 12px;
    font-weight: 800;
    outline: none;
}

.mountain-control-card select:focus {
    border-color: #27b5ff;
    box-shadow: 0 0 0 4px rgba(39, 181, 255, 0.14);
}

.mountain-main-btn,
.mountain-soft-btn {
    width: 100%;
    min-height: 50px;
    border: none;
    border-radius: 999px;
    margin-top: 14px;
    padding: 0 18px;
    font-size: 16px;
    font-weight: 1000;
    cursor: pointer;
}

.mountain-main-btn {
    color: #ffffff;
    background: linear-gradient(135deg, #0fbf75, #00a6ff);
    box-shadow: 0 14px 26px rgba(0, 166, 255, 0.22);
}

.mountain-soft-btn {
    color: #17315b;
    background: #eef7ff;
}

.mountain-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 18px;
}

.mountain-stats div {
    padding: 12px 8px;
    border-radius: 18px;
    background: linear-gradient(180deg, #f8fbff, #fffaf0);
    text-align: center;
    border: 1px solid #e8efff;
}

.mountain-stats strong {
    display: block;
    color: #17315b;
    font-size: 22px;
}

.mountain-stats span {
    display: block;
    color: #52617d;
    font-size: 12px;
    font-weight: 900;
    margin-top: 3px;
}

.mountain-tip {
    margin-top: 18px;
    padding: 16px;
    border-radius: 22px;
    background: #fff8da;
}

.mountain-tip strong {
    color: #17315b;
}

.mountain-tip p {
    margin: 7px 0 0 0;
    color: #52617d;
    line-height: 1.55;
}

.mountain-game-card {
    padding: 22px;
}

.mountain-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.mountain-topline strong {
    display: block;
    color: #17315b;
    font-size: 24px;
}

.mountain-topline span {
    color: #52617d;
}

.mountain-board-wrap {
    border-radius: 32px;
    padding: 14px;
    background: radial-gradient(circle at 50% 28%, #ffffff, #eef8ff 48%, #fff4df 100%);
    border: 3px solid #ffffff;
    box-shadow: inset 0 0 0 1px rgba(23, 49, 91, 0.05), 0 14px 30px rgba(31, 42, 68, 0.10);
}

.mountain-board {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    aspect-ratio: 16 / 9;
    background: #dceeff;
}

.mountain-board img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mountain-tiles {
    position: absolute;
    inset: 0;
    display: grid;
    gap: 2px;
    padding: 2px;
    z-index: 3;
}

.mountain-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(23, 49, 91, 0.98), rgba(0, 166, 255, 0.96));
    border: 1px solid rgba(255, 255, 255, 0.36);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-weight: 1000;
    font-size: clamp(14px, 2vw, 26px);
    transition: opacity 0.28s ease, transform 0.28s ease;
}

.mountain-tile span {
    display: inline-flex;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
}

.mountain-tile.revealed {
    opacity: 0;
    transform: scale(0.86);
    pointer-events: none;
}

.mountain-board.hint .mountain-tile:not(.revealed) {
    opacity: 0.28;
}

.mountain-win {
    position: absolute;
    inset: auto 24px 24px 24px;
    z-index: 5;
    display: none;
    padding: 16px 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.94);
    color: #17315b;
    text-align: center;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.mountain-win.show {
    display: block;
}

.mountain-win strong {
    display: block;
    font-size: 26px;
}

.mountain-win span {
    display: block;
    margin-top: 4px;
    color: #52617d;
    font-weight: 800;
}

.mountain-question-card {
    margin-top: 18px;
    padding: 18px;
    border-radius: 26px;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    border: 1px solid #e9efff;
}

.mountain-question-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}

#mountainCategory,
#mountainQuestionNumber {
    display: inline-flex;
    border-radius: 999px;
    padding: 7px 12px;
    background: #eaf7ff;
    color: #17315b;
    font-weight: 1000;
}

#mountainQuestion {
    margin: 0 0 14px 0;
    color: #17315b;
    font-size: clamp(22px, 3vw, 34px);
    line-height: 1.2;
}

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

.mountain-option-btn {
    min-height: 58px;
    border: 3px solid transparent;
    border-radius: 20px;
    background: #ffffff;
    color: #17315b;
    box-shadow: 0 10px 20px rgba(31, 42, 68, 0.08);
    font-size: 16px;
    font-weight: 1000;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.mountain-option-btn:hover {
    transform: translateY(-2px);
    border-color: #00a6ff;
}

.mountain-option-btn.correct {
    background: #e7ffe9;
    border-color: #25b46b;
    color: #126b45;
}

.mountain-option-btn.wrong {
    background: #ffecec;
    border-color: #ff6262;
    color: #9d1d1d;
}

.mountain-option-btn:disabled {
    cursor: default;
}

.mountain-feedback {
    min-height: 28px;
    margin: 14px 0 0 0;
    color: #52617d;
    font-weight: 900;
}

.mountain-feedback.correct {
    color: #126b45;
}

.mountain-feedback.wrong {
    color: #9d1d1d;
}

@media (max-width: 980px) {
    .mountain-reveal-hero,
    .mountain-reveal-layout {
        grid-template-columns: 1fr;
    }

    .mountain-control-card {
        order: 2;
    }

    .mountain-game-card {
        order: 1;
    }
}

@media (max-width: 620px) {
    .mountain-reveal-hero,
    .mountain-control-card,
    .mountain-game-card {
        border-radius: 24px;
        padding: 15px;
    }

    .mountain-options {
        grid-template-columns: 1fr;
    }

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

    .mountain-topline,
    .mountain-question-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .mountain-tile {
        border-radius: 6px;
    }
}