/* SPDX-License-Identifier: GPL-3.0-only */

/* ============================================================
   魔方计时台 —— 三栏仪表盘布局
   左边栏：统计与排行 | 中间：计时工作台 | 右边栏：设备控制
   ============================================================ */

/* ---------- 1. 全局变量 ---------- */
.cube-page {
    --cube-accent: #222222;
    --cube-ink: #222222;
    --cube-muted: #737373;
    --cube-border: rgba(0, 0, 0, 0.1);
    --cube-error: #b24444;
    --cube-success: #2f7f68;
    --cube-warning: #a46b17;
    --cube-mono: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
    --cube-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    --cube-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1);
    --cube-radius: 8px;
    --cube-sidebar-width: 280px;
    --cube-sidebar-right-width: 240px;

    display: grid;
    grid-template-columns: var(--cube-sidebar-width) 1fr var(--cube-sidebar-right-width);
    grid-template-rows: 1fr;
    gap: 16px;
    height: calc(100vh - 120px);
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    color: var(--cube-ink);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

.cube-page * { box-sizing: border-box; }

/* 收窄站点留白 */
body:has(#app-main.cube-main) { background: #fff; }
html[data-mode=dark] body:has(#app-main.cube-main) { background: #111; }
body:has(#app-main.cube-main) .top-spacer { height: 14px; }
#app-main.cube-main { padding-top: 0; }

/* 滚动条 */
.cube-page *::-webkit-scrollbar { width: 6px; height: 6px; }
.cube-page *::-webkit-scrollbar-track { background: transparent; }
.cube-page *::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: var(--cube-border);
}
.cube-page *::-webkit-scrollbar-thumb:hover {
    background: var(--cube-muted);
}

/* ---------- 2. 左侧边栏 ---------- */
.cube-sidebar-left {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    overflow-x: hidden;
}

.cube-user-card {
    padding: 20px;
    text-align: center;
}

.cube-avatar {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    border-radius: 50%;
    color: var(--cube-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 600;
}

.cube-user-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
}

.cube-user-avg {
    font-size: 13px;
    color: var(--cube-muted);
}

.cube-user-avg strong {
    color: var(--cube-ink);
    font-family: var(--cube-mono);
    font-variant-numeric: tabular-nums;
}

.cube-stats-block,
.cube-recent-block,
.cube-leaderboard-block {
    padding: 16px;
}

.cube-sidebar-title {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.cube-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.cube-sidebar-caption {
    margin: 0 0 12px;
    font-size: 11px;
    color: var(--cube-muted);
}

.cube-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.cube-stat-label {
    font-size: 12px;
    color: var(--cube-muted);
}

.cube-stat-value {
    font-size: 16px;
    font-weight: 600;
    font-family: var(--cube-mono);
    font-variant-numeric: tabular-nums;
}

.cube-recent-block {
    flex: 1;
    min-height: 200px;
    display: flex;
    flex-direction: column;
}

.cube-recent-list {
    flex: 1;
    overflow-y: auto;
    font-size: 12px;
}

.cube-leaderboard-block {
    flex: 1;
    min-height: 250px;
    display: flex;
    flex-direction: column;
}

.cube-leaderboard-list {
    flex: 1;
    overflow-y: auto;
    font-size: 11px;
}

.cube-score-row {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 8px 0;
}

.cube-score-rank {
    color: var(--cube-muted);
    font-family: var(--cube-mono);
    font-size: 10px;
}

.cube-score-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cube-score-time {
    font-family: var(--cube-mono);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
}

.cube-score-detail {
    display: block;
    margin-top: 2px;
    color: var(--cube-muted);
    font-size: 9px;
}

.cube-icon-button {
    min-width: 32px;
    min-height: 32px;
    padding: 4px 8px;
    border: none;
    background: transparent;
    color: var(--cube-muted);
    cursor: pointer;
    font-size: 16px;
    border-radius: 4px;
}

.cube-icon-button:hover {
    color: var(--cube-accent);
}

/* ---------- 3. 中间工作区 ---------- */
.cube-workspace {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    padding: 24px;
}

.cube-scramble-header {
    padding-bottom: 16px;
}

.cube-scramble-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cube-scramble-title {
    margin: 0;
    font-size: 11px;
}

.cube-label {
    color: var(--cube-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.cube-scramble-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
}

.cube-scramble-status {
    font-family: var(--cube-mono);
    color: var(--cube-muted);
}

/* 内联打乱公式 */
.cube-scramble-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cube-scramble-inline .cube-scramble-empty {
    padding: 8px 12px;
}

.cube-message {
    margin: 0;
    padding: 12px 16px;
    font-size: 12px;
    color: var(--cube-muted);
    text-align: center;
}

.cube-message[data-error=true] {
    color: var(--cube-error);
}

/* 核心焦点区 */
.cube-focus-area {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: center;
    min-height: 0;
    padding: 24px 0;
}

/* 魔方视图 */
.cube-view-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    container-type: inline-size;
}

.cube-net {
    /* translateZ 需要长度，百分比会让六个面的变换失效。 */
    --cube-size: min(100cqw, 320px);
    --cube-edge: calc(var(--cube-size) * 0.6);
    --cube-half: calc(var(--cube-edge) / 2);

    width: var(--cube-size);
    height: var(--cube-size);
    perspective: 1000px;
    touch-action: pan-y;
    cursor: grab;
    border-radius: var(--cube-radius);
    user-select: none;
}

.cube-net:active {
    cursor: grabbing;
}

.cube-3d {
    display: grid;
    grid-template: 1fr / 1fr;
    place-items: center;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.cube-face {
    grid-area: 1 / 1;
    width: var(--cube-edge);
    height: var(--cube-edge);
    display: grid;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
    gap: 3px;
    border-radius: 6px;
    background: #1e2938;
    padding: 4px;
    backface-visibility: hidden;
}

.cube-face[data-face=F] { transform: translateZ(var(--cube-half)); }
.cube-face[data-face=B] { transform: rotateY(180deg) translateZ(var(--cube-half)); }
.cube-face[data-face=R] { transform: rotateY(90deg) translateZ(var(--cube-half)); }
.cube-face[data-face=L] { transform: rotateY(-90deg) translateZ(var(--cube-half)); }
.cube-face[data-face=U] { transform: rotateX(90deg) translateZ(var(--cube-half)); }
.cube-face[data-face=D] { transform: rotateX(-90deg) translateZ(var(--cube-half)); }

.cube-sticker {
    display: block;
    aspect-ratio: 1;
    border-radius: 3px;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 0 -2px 2px rgba(0, 0, 0, 0.07);
}

.cube-sticker[data-color=U] { background: #fafafa; }
.cube-sticker[data-color=R] { background: #d94c49; }
.cube-sticker[data-color=F] { background: #229b60; }
.cube-sticker[data-color=D] { background: #f5d43d; }
.cube-sticker[data-color=L] { background: #ec942c; }
.cube-sticker[data-color=B] { background: #3279d7; }

.cube-view-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.cube-view-hint {
    font-size: 11px;
    color: var(--cube-muted);
}

.cube-text-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 8px;
    border: none;
    background: transparent;
    color: var(--cube-accent);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
}

.cube-text-button:hover {
    text-decoration: underline;
}

/* 计时器 */
.cube-timer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.cube-phase-badge {
    --phase-color: var(--cube-accent);

    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    color: var(--phase-color);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.cube-phase-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.cube-page[data-phase=armed] .cube-phase-badge,
.cube-page[data-phase=running] .cube-phase-badge {
    --phase-color: var(--cube-warning);
}

.cube-page[data-phase=finished] .cube-phase-badge {
    --phase-color: var(--cube-success);
}

.cube-page[data-phase=stopped] .cube-phase-badge {
    --phase-color: var(--cube-error);
}

.cube-page[data-phase=running] .cube-phase-badge::before {
    animation: cube-pulse 1s ease-in-out infinite;
}

@keyframes cube-pulse {
    50% {
        box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 20%, transparent);
    }
}

.cube-timer-display {
    font-family: var(--cube-mono);
    font-size: clamp(56px, 8vw, 96px);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--cube-ink);
}

.cube-timer-metrics {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--cube-muted);
    font-size: 13px;
}

.cube-metric strong {
    color: var(--cube-ink);
    font-family: var(--cube-mono);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cube-metric-sep {
    opacity: 0.5;
}

/* 控制按钮 */
.cube-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-top: 16px;
}

.cube-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 16px;
    border: 0;
    background: transparent;
    color: var(--cube-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: color 150ms ease, opacity 150ms ease;
}

.cube-button:hover:not(:disabled) {
    color: var(--cube-ink);
    opacity: 0.65;
}

.cube-button.primary {
    color: var(--cube-accent);
    font-weight: 600;
}

.cube-button .bi {
    font-size: 16px;
    line-height: 1;
}

.cube-button.secondary {
    color: var(--cube-muted);
}

.cube-button.secondary:hover:not(:disabled) {
    color: var(--cube-ink);
}

.cube-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.cube-button[hidden] {
    display: none;
}

.cube-button.block {
    width: 100%;
    justify-content: flex-start;
}

.cube-button.cube-login {
    position: fixed;
    left: max(20px, env(safe-area-inset-left));
    bottom: max(20px, env(safe-area-inset-bottom));
    z-index: 10;
    min-width: 0;
}


.cube-scramble {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cube-scramble[data-empty=true] {
    display: block;
}

.cube-scramble-empty {
    color: var(--cube-muted);
    font-size: 12px;
    padding: 8px 12px;
}

.cube-step {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 10px;
    font-family: var(--cube-mono);
    font-size: 14px;
    color: var(--cube-ink);
    transition: all 150ms ease;
}

.cube-step-index {
    font-size: 9px;
    color: var(--cube-muted);
}

.cube-step-move {
    font-weight: 500;
}

.cube-step-mark {
    font-size: 10px;
    margin-left: 2px;
}

.cube-step[data-state=current] {
    color: var(--cube-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 5px;
}

.cube-step[data-state=current] .cube-step-index {
    color: var(--cube-muted);
}

.cube-step[data-state=done] {
    color: var(--cube-success);
}

.cube-step[data-state=done] .cube-step-index {
    color: var(--cube-success);
}

.cube-scramble-progress {
    display: block;
    margin-top: 8px;
    font-size: 11px;
    color: var(--cube-muted);
    text-align: center;
}

/* ---------- 4. 右侧边栏 ---------- */
.cube-sidebar-right {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
}

.cube-device-panel {
    padding: 16px;
}

.cube-bluetooth-icon {
    font-size: 16px;
    vertical-align: middle;
}

.cube-device-info {
    margin: 16px 0;
}

.cube-connection-indicator {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
}

.cube-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cube-muted);
    flex-shrink: 0;
    transition: all 200ms ease;
}

.cube-page[data-connected=true] .cube-status-dot {
    background: var(--cube-success);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cube-success) 20%, transparent);
}

.cube-connection-label {
    flex: 1;
    min-width: 0;
}

.cube-connection-label strong {
    display: block;
    font-size: 13px;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cube-battery-info {
    display: block;
    font-family: var(--cube-mono);
    font-size: 11px;
    color: var(--cube-muted);
}

.cube-device-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cube-help-section {
    padding: 12px;
}

.cube-help-section summary {
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    color: var(--cube-muted);
}

.cube-help-section summary::-webkit-details-marker {
    display: none;
}

.cube-help-section summary:hover {
    color: var(--cube-accent);
}

.cube-help-content {
    font-size: 11px;
    line-height: 1.6;
    color: var(--cube-muted);
}

.cube-help-content p {
    margin: 0 0 12px;
}

.cube-help-content p:last-child {
    margin-bottom: 0;
}

.cube-help-content ul {
    margin: 0;
    padding-left: 16px;
}

.cube-help-content li {
    margin-bottom: 8px;
}

.cube-help-content label {
    display: block;
    margin: 12px 0 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cube-help-content input {
    width: 100%;
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid var(--cube-border);
    font-family: var(--cube-mono);
    font-size: 11px;
    background: transparent;
    color: var(--cube-ink);
}

.cube-help-content input:focus {
    outline: 2px solid var(--cube-accent);
    outline-offset: 2px;
    border-color: var(--cube-accent);
}

.cube-help-note {
    font-size: 10px;
    margin-top: 8px;
}

/* ---------- 6. 暗色模式 ---------- */
html[data-mode=dark] .cube-page {
    --cube-accent: #ededed;
    --cube-ink: #ededed;
    --cube-muted: #a3a3a3;
    --cube-border: rgba(255, 255, 255, 0.1);
    --cube-error: #ee9696;
    --cube-success: #6cbda3;
    --cube-warning: #d9a34f;
    --cube-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --cube-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* ---------- 7. 响应式 ---------- */
@media (max-width: 1200px) {
    .cube-page {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        height: auto;
        min-height: calc(100vh - 120px);
    }

    .cube-sidebar-left {
        grid-column: 1;
        grid-row: 1;
        max-height: none;
        overflow: visible;
    }

    .cube-workspace {
        grid-column: 1;
        grid-row: 2;
    }

    .cube-sidebar-right {
        grid-column: 1;
        grid-row: 3;
        max-height: none;
        overflow: visible;
    }

    .cube-focus-area {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .cube-recent-block,
    .cube-leaderboard-block {
        min-height: 150px;
    }
}

@media (max-width: 768px) {
    .cube-page {
        padding: 12px;
        gap: 12px;
    }

    .cube-workspace {
        padding: 16px;
    }

    .cube-scramble-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .cube-scramble-formula {
        font-size: 14px;
    }

    .cube-timer-display {
        font-size: clamp(40px, 12vw, 64px);
    }

    .cube-net {
        --cube-size: min(100cqw, 240px);
    }

    .cube-controls {
        flex-wrap: wrap;
    }

    .cube-button {
        flex: 1 1 auto;
        min-width: 120px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cube-page *,
    .cube-page *::before,
    .cube-page *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* ---------- 8. 聚焦可访问性 ---------- */
.cube-button:focus-visible,
.cube-net:focus-visible,
input:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--cube-accent);
    outline-offset: 2px;
}

.cube-empty {
    margin: 0;
    padding: 16px;
    text-align: center;
    color: var(--cube-muted);
    font-size: 12px;
}