.cf-page {
    --cf-ink:#e9f1fc;
    --cf-muted:#a0b1c9;
    --cf-line:#2d3c58;
    --cf-panel:#142139;
    color:var(--cf-ink);
    background:radial-gradient(ellipse at 15% 0,#243967 0,transparent 50%),#0b1425;
    padding:34px 18px 48px;
    font-family:system-ui,sans-serif;
    min-height:80vh
}
.cf-page section {
    margin-bottom:0
}
.cf-page * {
    box-sizing:border-box
}
.cf-wrap {
    max-width:980px;
    margin:0 auto
}
.cf-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:25px
}
.cf-eyebrow {
    font-size:11px;
    font-weight:800;
    letter-spacing:.2em;
    color:#91b8ff
}
.cf-header h1 {
    margin:6px 0;
    font-size:clamp(30px,6vw,46px);
    letter-spacing:.05em;
    line-height:1.35
}
.cf-header p {
    margin:0;
    color:var(--cf-muted);
    font-size:14px
}
.cf-back {
    color:#becfe8;
    font-size:12px;
    text-decoration:underline;
    text-underline-offset:4px;
    white-space:nowrap
}
.cf-layout {
    display:grid;
    grid-template-columns:minmax(0,640px) 280px;
    gap:22px;
    align-items:start
}
.cf-play {
    min-width:0;
    border:1px solid var(--cf-line);
    border-radius:8px;
    padding:clamp(14px,3vw,26px);
    background:#142139;
    box-shadow:0 22px 60px #03091455
}
.cf-board-heading {
    display:flex;
    justify-content:space-between;
    gap:8px;
    font-size:12px;
    color:var(--cf-muted);
    margin-bottom:15px
}
.cf-dot {
    display:inline-block;
    width:8px;
    height:8px;
    margin-right:5px;
    border-radius:50%;
    background:#8fddce
}
.cf-board {
    display:grid;
    gap:3px;
    aspect-ratio:1;
    width:100%;
    padding:5px;
    border-radius:8px;
    background:#0a1220;
    overflow:hidden
}
.cf-cell {
    position:relative;
    display:grid;
    place-items:center;
    min-width:0;
    min-height:0;
    border-radius:3px;
    background:var(--tile);
    color:#0b1425;
    transition:background-color .23s ease;
    isolation:isolate
}
.cf-cell.cf-owned {
    box-shadow:inset 0 0 0 1px #ffffff80
}
.cf-cell.cf-origin::after {
    content:'';
    position:absolute;
    inset:18%;
    border:2px solid #fff;
    border-radius:50%;
    box-shadow:0 1px 3px #0008
}
.cf-cell span {
    font-size:clamp(8px,1.6vw,12px);
    font-weight:900;
    opacity:0
}
.cf-board.cf-numbers .cf-cell span {
    opacity:1
}
.cf-board.cf-numbers .cf-origin::after {
    inset:5%;
    border-width:1px
}
.cf-cell.cf-gained {
    animation:cf-spread .35s ease-out
}
@keyframes cf-spread {
    50% {
        filter:brightness(1.35);
        transform:scale(.9)
    }
}
.cf-progress-row {
    display:flex;
    justify-content:space-between;
    margin-top:17px;
    font-size:12px;
    color:var(--cf-muted)
}
.cf-progress-row strong {
    color:#b3f2de
}
.cf-progress {
    height:6px;
    background:#273750;
    border-radius:8px;
    margin:9px 0 20px;
    overflow:hidden
}
.cf-progress span {
    display:block;
    height:100%;
    width:0;
    background:#91dfc8;
    transition:width .25s ease
}
.cf-palette-label {
    font-size:13px;
    font-weight:700;
    margin:0 0 12px
}
.cf-palette-label span {
    font-size:10px;
    color:var(--cf-muted);
    font-weight:400;
    float:right
}
.cf-palette {
    display:grid;
    grid-template-columns:repeat(var(--colors,5),minmax(0,1fr));
    gap:8px
}
.cf-color {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    min-width:0;
    min-height:54px;
    border:2px solid transparent;
    border-radius:8px;
    background:var(--tile);
    color:#101b2c;
    font:inherit;
    font-weight:900;
    cursor:pointer;
    touch-action:manipulation;
    transition:transform .15s,box-shadow .15s
}
.cf-color span {
    font-size:9px;
    font-weight:700
}
.cf-color:hover:not(:disabled) {
    transform:translateY(-3px)
}
.cf-color:disabled {
    cursor:default;
    opacity:.48
}
.cf-color[aria-pressed="true"] {
    border-color:#fff;
    box-shadow:0 0 0 2px #ffffff35
}
.cf-color.cf-hint {
    outline:3px solid #fff;
    outline-offset:3px;
    transform:translateY(-3px)
}
.cf-message {
    min-height:42px;
    margin:17px 0 0;
    font-size:13px;
    line-height:1.65;
    color:#c6d9f7
}
.cf-side {
    display:grid;
    gap:14px
}
.cf-panel {
    border:1px solid var(--cf-line);
    border-radius:8px;
    background:#142139;
    padding:17px
}
.cf-panel h2 {
    font-size:12px;
    font-weight:800;
    letter-spacing:.07em;
    color:#b8c8de;
    margin:0 0 14px
}
.cf-stats {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px
}
.cf-stats>div+div {
    border-left:1px solid var(--cf-line);
    padding-left:17px
}
.cf-stats span {
    font-size:11px;
    color:var(--cf-muted);
    display:block
}
.cf-stats strong {
    display:block;
    font-size:36px;
    line-height:1.25;
    color:#b2efd8;
    font-variant-numeric:tabular-nums
}
.cf-stats strong.cf-low {
    color:#ffb09c
}
.cf-small {
    font-size:11px;
    line-height:1.6;
    color:var(--cf-muted);
    margin:10px 0 0
}
.cf-settings {
    display:grid;
    gap:10px
}
.cf-settings h2 {
    margin-bottom:0
}
.cf-settings>label {
    font-size:12px;
    color:var(--cf-muted)
}
.cf-settings select {
    width:100%;
    padding:10px 8px;
    border:1px solid var(--cf-line);
    border-radius:8px;
    background:#0e192c;
    color:var(--cf-ink);
    font:inherit;
    font-size:13px
}
.cf-button {
    min-height:42px;
    padding:9px 10px;
    border:1px solid #405270;
    border-radius:8px;
    background:#20304a;
    color:#e9f1fc;
    cursor:pointer;
    font:inherit;
    font-size:12px;
    font-weight:700;
    touch-action:manipulation
}
.cf-button:hover:not(:disabled) {
    background:#2a3e5d;
    border-color:#89abe0
}
.cf-button:disabled {
    opacity:.4;
    cursor:default
}
.cf-button.cf-primary {
    background:#a4e8d1;
    color:#122b28;
    border-color:#a4e8d1
}
.cf-button.cf-primary:hover {
    background:#c0f5e3
}
.cf-two {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px
}
.cf-check {
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:4px
}
.cf-check input {
    width:17px;
    height:17px;
    accent-color:#a4e8d1
}
.cf-volume {
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:15px;
    font-size:12px;
    color:var(--cf-muted)
}
.cf-volume input {
    min-width:0;
    flex:1;
    accent-color:#a4e8d1
}
.cf-button[aria-pressed="false"] {
    color:#a0b1c9;
    background:#0e192c
}
.cf-help ol {
    padding-left:18px;
    margin:0
}
.cf-help li+li {
    margin-top:8px
}
.cf-help li,.cf-help p {
    font-size:12px;
    line-height:1.8;
    color:var(--cf-muted)
}
.cf-help p {
    margin:12px 0 0
}
.cf-note {
    text-align:center;
    font-size:11px;
    color:var(--cf-muted);
    line-height:1.8;
    margin:22px 0 0
}
.cf-dialog {
    width:min(400px,calc(100% - 32px));
    border:1px solid #6b9f9a;
    border-radius:8px;
    padding:28px;
    background:#142139;
    color:#e9f1fc;
    text-align:center;
    box-shadow:0 25px 100px #0008
}
.cf-dialog::backdrop {
    background:#060e20c9;
    backdrop-filter:blur(4px)
}
.cf-dialog h2 {
    font-size:30px;
    margin:10px 0;
    color:#b2efd8
}
.cf-dialog p {
    font-size:14px;
    line-height:1.9;
    color:#b8c8de
}
.cf-dialog-actions {
    display:grid;
    gap:9px;
    margin-top:22px
}
.cf-page :is(button,a,select,input):focus-visible {
    outline:3px solid #fff;
    outline-offset:4px
}
@media(max-width:760px) {
    .cf-page {
        padding:22px 12px 36px
    }
    .cf-layout {
        grid-template-columns:1fr;
        gap:14px
    }
    .cf-side {
        grid-template-columns:1fr 1fr
    }
    .cf-header {
        align-items:flex-start
    }
    .cf-side .cf-settings {
        grid-row:span 2
    }
    .cf-help {
        grid-column:1/-1
    }
    .cf-stats strong {
        font-size:30px
    }
    .cf-header .cf-back {
        margin-top:10px
    }
    .cf-board {
        gap:2px
    }
    .cf-color {
        min-height:50px
    }
    .cf-color span {
        font-size:8px
    }
}
@media(max-width:400px) {
    .cf-panel {
        padding:12px
    }
    .cf-palette {
        gap:5px
    }
    .cf-stats {
        gap:8px
    }
    .cf-stats>div+div {
        padding-left:8px
    }
    .cf-palette-label span {
        float:none;
        display:block;
        margin-top:4px
    }
    .cf-back {
        font-size:10px
    }
    .cf-two {
        gap:5px
    }
    .cf-button {
        font-size:11px;
        padding:8px 5px
    }
}
@media(prefers-reduced-motion:reduce) {
    .cf-page * {
        animation:none!important;
        transition:none!important
    }
}