.ccc-horse-race {
    width: 100%;
    max-width: 1920px;
    height: min(var(--ccc-game-height, 720px), 92vh);
    min-height: 420px;
    margin: 0 auto;
    background: #061f0d;
    color: #f8f1df;
    font-family: "Segoe UI", Arial, sans-serif;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(248, 241, 223, 0.35);
    box-sizing: border-box;
}

.ccc-horse-race *,
.ccc-horse-race *::before,
.ccc-horse-race *::after {
    box-sizing: border-box;
}

.ccc-horse-race:fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    border: 0;
}

.ccc-horse-game {
    position: absolute;
    inset: 0;
}

.ccc-horse-canvas {
    width: 100%;
    height: 100%;
    display: block;
    background: #061f0d;
}

.ccc-toolbar,
.ccc-system-bar {
    position: absolute;
    z-index: 5;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding: 8px;
}

.ccc-toolbar {
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    justify-content: center;
    width: min(1180px, calc(100% - 24px));
}

.ccc-system-bar {
    right: 10px;
    bottom: 10px;
    justify-content: flex-end;
}

.ccc-btn,
.ccc-input,
.ccc-select {
    min-height: 34px;
    border: 1px solid rgba(17, 17, 17, 0.35);
    font: 700 13px/1.2 "Segoe UI", Arial, sans-serif;
}

.ccc-btn {
    appearance: none;
    border-radius: 4px;
    background: #f5ead1;
    color: #111;
    padding: 7px 11px;
    cursor: pointer;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
    white-space: nowrap;
}

.ccc-btn:hover,
.ccc-btn:focus-visible {
    background: #fff6d0;
}

.ccc-btn:disabled {
    opacity: 0.48;
    cursor: not-allowed;
}

.ccc-btn.is-active,
.ccc-btn.is-danger-active {
    background: #ffded4;
    color: #b91212;
}

.ccc-btn.is-lang-active {
    background: #be1414;
    color: #fff;
}

.ccc-check {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    background: rgba(4, 20, 8, 0.8);
    border: 1px solid rgba(248, 241, 223, 0.45);
    color: #f8f1df;
    font: 700 13px/1.2 "Segoe UI", Arial, sans-serif;
}

.ccc-panel {
    position: absolute;
    z-index: 6;
    top: 68px;
    left: 14px;
    width: min(390px, calc(100% - 28px));
    max-height: calc(100% - 128px);
    overflow: auto;
    padding: 14px;
    background: rgba(4, 20, 8, 0.94);
    border: 1px solid rgba(248, 241, 223, 0.6);
    color: #f8f1df;
    display: none;
}

.ccc-panel.is-open {
    display: block;
}

.ccc-panel h3 {
    margin: 0 0 10px;
    font-size: 18px;
    line-height: 1.25;
}

.ccc-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.ccc-input,
.ccc-select,
.ccc-textarea {
    width: 100%;
    background: #fffdf5;
    color: #111;
    border-radius: 3px;
    padding: 7px 9px;
}

.ccc-field-label {
    display: block;
    margin: 8px 0 4px;
    font: 700 12px/1.2 "Segoe UI", Arial, sans-serif;
    color: #f8f1df;
}

.ccc-online-status {
    min-height: 120px;
    margin-top: 10px;
    padding: 10px;
    white-space: pre-line;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(248, 241, 223, 0.35);
    font: 700 13px/1.4 "Segoe UI", Arial, sans-serif;
}

.ccc-online-players {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.ccc-online-player-row {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.26);
    border: 1px solid rgba(248, 241, 223, 0.35);
    color: #f8f1df;
    font: 700 13px/1.3 "Segoe UI", Arial, sans-serif;
}

.ccc-online-player-row .ccc-btn {
    min-height: 28px;
    padding: 5px 9px;
}

.ccc-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}

.ccc-list {
    width: 100%;
    min-height: 110px;
}

.ccc-textarea {
    min-height: 220px;
    resize: vertical;
    font: 600 12px/1.35 Consolas, "Courier New", monospace;
}

.ccc-modal {
    position: absolute;
    z-index: 8;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: rgba(0, 0, 0, 0.55);
}

.ccc-modal.is-open {
    display: flex;
}

.ccc-modal-box {
    width: min(720px, 100%);
    max-height: min(620px, 90%);
    overflow: auto;
    background: #061f0d;
    border: 1px solid rgba(248, 241, 223, 0.75);
    padding: 18px;
    color: #f8f1df;
}

.ccc-modal-box h3 {
    margin: 0 0 10px;
}

.ccc-modal-box pre {
    white-space: pre-wrap;
    font: 600 14px/1.45 "Segoe UI", Arial, sans-serif;
}

.ccc-intro {
    position: absolute;
    z-index: 7;
    inset: 0;
    display: none;
    background: #061f0d;
}

.ccc-intro.is-open {
    display: block;
}

.ccc-intro video,
.ccc-intro img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ccc-intro .ccc-btn {
    position: absolute;
    right: 24px;
    bottom: 74px;
    z-index: 2;
    min-width: 160px;
}

@media (max-width: 860px) {
    .ccc-horse-race {
        height: min(var(--ccc-game-height, 620px), 96vh);
    }

    .ccc-toolbar {
        top: 6px;
        gap: 6px;
    }

    .ccc-btn,
    .ccc-check {
        font-size: 11px;
        min-height: 30px;
        padding: 6px 8px;
    }

    .ccc-system-bar {
        left: 8px;
        right: 8px;
        justify-content: center;
    }
}