/* public/assets/css/tools/game/rubiks-cube.css */

.rc-wrapper { padding: 32px; }
.rc-header { text-align: center; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border-color); }
.rc-title { margin: 0 0 10px 0; font-size: 1.6rem; color: var(--text-main); }
.rc-subtitle { margin: 0; color: var(--text-muted); font-size: 1rem; line-height: 1.6; }

.rc-container { display: flex; flex-wrap: wrap; gap: 24px; }

.rc-panel { flex: 1; background: var(--bg-body); padding: 24px; border-radius: var(--radius-lg); border: 1px solid var(--border-color); display: flex; flex-direction: column; }
.rc-panel-left { min-width: 320px; align-items: center; }
.rc-panel-right { min-width: 300px; }

.rc-panel-title { font-size: 1.1rem; font-weight: 700; color: var(--text-main); margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 12px; width: 100%; }

/* --- 调色板 --- */
.rc-palette { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; background: var(--bg-surface); padding: 12px 16px; border-radius: var(--radius-md); border: 1px solid var(--border-color); width: 100%; justify-content: center; }
.rc-palette-title { font-size: 0.9rem; font-weight: 600; color: var(--text-muted); }
.rc-colors { display: flex; gap: 8px; }
.rc-color { width: 30px; height: 30px; border-radius: 6px; cursor: pointer; border: 2px solid #cbd5e1; transition: 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.rc-color.active { transform: scale(1.15); border-color: var(--text-main); box-shadow: 0 4px 8px rgba(0,0,0,0.2); }

/* --- 魔方 2D 展开图 (十字型布局) --- */
.rc-net-container { display: flex; justify-content: center; width: 100%; overflow-x: auto; padding: 10px 0; }
.rc-net {
    display: grid;
    /* 十字展开图通常是 4列 x 3行 的结构 */
    grid-template-columns: repeat(4, 84px);
    grid-template-rows: repeat(3, 84px);
    gap: 8px;
    width: max-content;
}

.rc-face { width: 84px; height: 84px; background: #000; padding: 3px; border-radius: 4px; }
.rc-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 2px; width: 100%; height: 100%; }
.rc-tile { background: #cbd5e1; border-radius: 2px; cursor: pointer; transition: background 0.1s; }
.rc-tile:hover { filter: brightness(0.9); }
/* 中心块不允许修改，增加视觉提示 */
.rc-tile.center { cursor: not-allowed; }

/* 展开图特定位置摆放 */
.rc-face-U { grid-column: 2; grid-row: 1; }
.rc-face-L { grid-column: 1; grid-row: 2; }
.rc-face-F { grid-column: 2; grid-row: 2; }
.rc-face-R { grid-column: 3; grid-row: 2; }
.rc-face-B { grid-column: 4; grid-row: 2; }
.rc-face-D { grid-column: 2; grid-row: 3; }

/* --- 右侧按钮与控制 --- */
.rc-btn-group { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.rc-btn { padding: 12px; border-radius: var(--radius-md); font-size: 0.95rem; font-weight: bold; cursor: pointer; transition: 0.2s; border: none; }
.rc-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.rc-btn-primary { background: var(--primary-color); color: #fff; }
.rc-btn-primary:hover:not(:disabled) { background: var(--primary-hover); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,102,204,0.2); }
.rc-btn-outline { background: var(--bg-surface); color: var(--text-main); border: 1px solid var(--border-color); }
.rc-btn-outline:hover:not(:disabled) { border-color: var(--primary-color); color: var(--primary-color); }
.rc-btn-danger { background: #fef2f2; color: #ef4444; border: 1px solid #fecaca; }
.rc-btn-danger:hover { background: #fee2e2; }
.rc-btn-success { background: #10b981; color: #fff; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2); }
.rc-btn-success:hover { background: #059669; transform: translateY(-2px); }

.rc-moves-panel { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 16px; margin-bottom: 16px; }
.rc-moves-title { font-size: 0.9rem; font-weight: 600; color: var(--text-muted); margin-bottom: 12px; }
.rc-moves-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.rc-move-btn { background: var(--bg-body); border: 1px solid var(--border-color); color: var(--text-main); padding: 8px 0; border-radius: 6px; font-family: monospace; font-weight: bold; font-size: 1rem; cursor: pointer; transition: 0.1s; }
.rc-move-btn:hover { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.rc-move-btn:active { transform: scale(0.95); }

.rc-history { font-family: monospace; font-size: 0.95rem; color: var(--primary-color); background: rgba(0,102,204,0.05); padding: 12px; border-radius: var(--radius-md); border: 1px dashed var(--border-color); min-height: 45px; word-break: break-all; }
.rc-history-lbl { color: var(--text-muted); font-weight: 600; margin-right: 8px; font-family: inherit; }

.rc-solution-log { background: #0f172a; color: #10b981; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; padding: 16px; border-radius: var(--radius-md); font-size: 0.95rem; min-height: 100px; line-height: 1.6; }

@media (max-width: 768px) {
    .rc-container { flex-direction: column; }
    .rc-net { transform: scale(0.85); transform-origin: top center; margin-bottom: -40px; }
    .rc-moves-grid { grid-template-columns: repeat(4, 1fr); }
}

[data-theme="dark"] .rc-btn-outline, [data-theme="dark"] .rc-move-btn { background: #1e293b; border-color: #334155; color: #f8fafc; }
[data-theme="dark"] .rc-btn-danger { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.2); }