web-a2e 1.0.0

package/src/css/settings-windows.css

@@ -0,0 +1,1231 @@
+/* ============================================
+   SOFT SWITCHES WINDOW
+   ============================================ */
+
+.softswitch-content {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.switch-group {
+    background: var(--input-bg);
+    border-radius: var(--radius-sm);
+    padding: 6px;
+}
+
+.switch-group-title {
+    font-size: 9px;
+    font-weight: 600;
+    color: var(--accent-blue);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    margin-bottom: 6px;
+    padding-bottom: 4px;
+    border-bottom: 1px solid var(--accent-blue-bg-strong);
+}
+
+.switch-list {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+}
+
+.switch-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 4px 6px;
+    background: var(--input-bg-dark);
+    border-radius: 3px;
+    transition: all 0.1s;
+}
+
+.switch-badge {
+    min-width: 60px;
+    padding: 2px 6px;
+    font-size: 9px;
+    font-weight: 700;
+    text-align: center;
+    background: var(--badge-dim-bg);
+    border: 1px solid var(--badge-dim-border);
+    border-radius: 3px;
+    color: var(--text-muted);
+    transition: all 0.15s;
+}
+
+.switch-badge.active {
+    background: var(--accent-green-bg-stronger);
+    border-color: rgba(63, 185, 80, 0.6);
+    color: var(--accent-green);
+    box-shadow: 0 0 8px rgba(63, 185, 80, 0.3);
+}
+
+.switch-desc {
+    font-size: 10px;
+    color: var(--text-muted);
+    flex: 1;
+}
+
+.switch-addr {
+    font-family: var(--font-mono);
+    font-size: 9px;
+    color: var(--accent-orange);
+    min-width: 65px;
+    opacity: 0.8;
+}
+
+.switch-item.read-only {
+    opacity: 0.7;
+}
+
+.switch-item.read-only .switch-badge {
+    background: var(--accent-blue-bg);
+    border-color: rgba(88, 166, 255, 0.25);
+}
+
+.switch-item.read-only .switch-badge.active {
+    background: var(--accent-blue-bg-stronger);
+    border-color: var(--accent-blue-border);
+    color: var(--accent-blue);
+    box-shadow: 0 0 8px rgba(88, 166, 255, 0.2);
+}
+
+/* Collapsible reference section */
+.switch-group-title.collapsible {
+    cursor: pointer;
+    user-select: none;
+}
+
+.switch-group-title.collapsible:hover {
+    color: var(--text-primary);
+}
+
+.reference-section {
+    margin-top: 6px;
+    border-top: 1px solid var(--reference-border);
+    padding-top: 6px;
+}
+
+.reference-list {
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.ref-subtitle {
+    font-size: 8px;
+    font-weight: 600;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    margin: 8px 0 4px 0;
+    opacity: 0.7;
+}
+
+.ref-subtitle:first-child {
+    margin-top: 0;
+}
+
+.ref-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 2px 4px;
+    font-size: 9px;
+}
+
+.ref-addr {
+    font-family: var(--font-mono);
+    color: var(--accent-orange);
+    min-width: 65px;
+    opacity: 0.7;
+}
+
+.ref-name {
+    font-weight: 600;
+    min-width: 70px;
+    color: var(--text-secondary);
+}
+
+.ref-desc {
+    color: var(--text-muted);
+    flex: 1;
+}
+
+/* ============================================
+   DISPLAY SETTINGS WINDOW
+   ============================================ */
+
+.display-settings-content {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    font-family: var(--font-sans);
+    font-size: 11px;
+    overflow: hidden;
+}
+
+.display-settings-content .settings-section {
+    background: var(--input-bg);
+    border-radius: var(--radius-sm);
+    padding: 6px 8px;
+}
+
+.display-settings-content .settings-section-title {
+    font-family: var(--font-sans);
+    font-size: 9px;
+    font-weight: 600;
+    color: var(--accent-blue);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    margin-bottom: 6px;
+    padding-bottom: 3px;
+    border-bottom: 1px solid var(--accent-blue-bg-strong);
+}
+
+.display-settings-content .setting-row {
+    display: grid;
+    grid-template-columns: 90px 1fr 28px;
+    align-items: center;
+    gap: 6px;
+    padding: 2px 0;
+}
+
+.display-settings-content .setting-row label {
+    font-family: var(--font-sans);
+    font-size: 10px;
+    color: var(--text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.display-settings-content input[type="range"] {
+    width: 100%;
+    min-width: 0;
+    height: 4px;
+    background: var(--input-bg-deeper);
+    border-radius: 2px;
+    -webkit-appearance: none;
+    appearance: none;
+    cursor: pointer;
+}
+
+.display-settings-content input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 12px;
+    height: 12px;
+    background: var(--accent-blue);
+    border-radius: 50%;
+    cursor: pointer;
+    transition: all 0.1s;
+}
+
+.display-settings-content input[type="range"]::-webkit-slider-thumb:hover {
+    background: var(--accent-green);
+    transform: scale(1.1);
+}
+
+.display-settings-content input[type="range"]::-moz-range-thumb {
+    width: 12px;
+    height: 12px;
+    background: var(--accent-blue);
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+.display-settings-content input[type="range"]::-moz-range-track {
+    height: 4px;
+    background: var(--input-bg-deeper);
+    border-radius: 2px;
+}
+
+.display-settings-content .setting-value {
+    font-family: var(--font-mono);
+    font-size: 9px;
+    color: var(--text-muted);
+    text-align: right;
+}
+
+/* Select dropdown for display settings */
+.display-settings-content .settings-select {
+    width: 100%;
+    padding: 4px 8px;
+    font-family: var(--font-sans);
+    font-size: 10px;
+    color: var(--text-primary);
+    background: var(--input-bg-deeper);
+    border: 1px solid var(--accent-blue-bg-stronger);
+    border-radius: 4px;
+    cursor: pointer;
+    appearance: none;
+    -webkit-appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2358a6ff' d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 6px center;
+    padding-right: 24px;
+}
+
+.display-settings-content .settings-select:hover {
+    border-color: var(--accent-blue);
+}
+
+.display-settings-content .settings-select:focus {
+    outline: none;
+    border-color: var(--accent-green);
+}
+
+.display-settings-content .settings-select option {
+    background: var(--bg-primary);
+    color: var(--text-primary);
+}
+
+/* Toggle switch row */
+.display-settings-content .toggle-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 4px 0;
+}
+
+.display-settings-content .toggle-row > label:first-child {
+    font-family: var(--font-sans);
+    font-size: 10px;
+    color: var(--text-secondary);
+}
+
+.display-settings-content .toggle {
+    position: relative;
+    display: inline-block;
+    width: 32px;
+    height: 18px;
+    flex-shrink: 0;
+}
+
+.display-settings-content .toggle input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.display-settings-content .toggle-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--input-bg-deeper);
+    border-radius: 18px;
+    transition: all 0.2s;
+}
+
+.display-settings-content .toggle-slider::before {
+    position: absolute;
+    content: "";
+    height: 12px;
+    width: 12px;
+    left: 3px;
+    bottom: 3px;
+    background: var(--text-muted);
+    border-radius: 50%;
+    transition: all 0.2s;
+}
+
+.display-settings-content .toggle input:checked + .toggle-slider {
+    background: var(--accent-green-dim);
+}
+
+.display-settings-content .toggle input:checked + .toggle-slider::before {
+    transform: translateX(14px);
+    background: var(--accent-green);
+}
+
+/* Reset button */
+.display-settings-content .settings-actions {
+    padding-top: 8px;
+    border-top: 1px solid var(--glass-border-subtle);
+}
+
+.display-settings-content .settings-btn {
+    width: 100%;
+    padding: 6px 12px;
+    font-family: var(--font-sans);
+    font-size: 10px;
+    font-weight: 500;
+    background: var(--glass-bg-header);
+    border: 1px solid var(--control-border);
+    border-radius: var(--radius-sm);
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: all 0.1s;
+}
+
+.display-settings-content .settings-btn:hover {
+    background: var(--accent-red-bg-stronger);
+    border-color: var(--accent-red-border);
+    color: var(--accent-red);
+}
+
+
+/* ============================================
+   Joystick Window
+   ============================================ */
+
+/* ---- Joystick Window ---- */
+.joystick-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 8px;
+    gap: 6px;
+}
+
+/* Wrapper positions axis labels around the circular area */
+.joystick-area-wrapper {
+    position: relative;
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 12px 14px;
+}
+
+.joystick-axis-label {
+    position: absolute;
+    font-family: var(--font-mono);
+    font-size: 0.6rem;
+    color: var(--text-muted);
+    opacity: 0.5;
+    pointer-events: none;
+    user-select: none;
+    letter-spacing: 0.02em;
+}
+
+.joystick-axis-l { left: 2px;  top: 50%; transform: translateY(-50%); }
+.joystick-axis-r { right: 2px; top: 50%; transform: translateY(-50%); }
+.joystick-axis-u { top: 0;     left: 50%; transform: translateX(-50%); }
+.joystick-axis-d { bottom: 0;  left: 50%; transform: translateX(-50%); }
+
+/* The circular joystick area - padding-bottom trick forces square aspect ratio */
+.joystick-area {
+    width: 100%;
+    max-width: 190px;
+    height: 0;
+    padding-bottom: min(100%, 190px);
+    background: radial-gradient(circle at center, var(--input-bg-deep) 0%, var(--control-bg) 70%, var(--control-bg-solid) 100%);
+    border: 1px solid var(--glass-border);
+    border-radius: 50%;
+    position: relative;
+    cursor: crosshair;
+    overflow: hidden;
+    flex-shrink: 0;
+}
+
+/* Concentric range guide rings */
+.joystick-ring {
+    position: absolute;
+    border: 1px dashed var(--glass-border-subtle);
+    border-radius: 50%;
+    pointer-events: none;
+    box-sizing: border-box;
+}
+
+.joystick-ring-75 {
+    width: 75%; height: 75%;
+    top: 12.5%; left: 12.5%;
+}
+
+.joystick-ring-50 {
+    width: 50%; height: 50%;
+    top: 25%; left: 25%;
+}
+
+.joystick-ring-25 {
+    width: 25%; height: 25%;
+    top: 37.5%; left: 37.5%;
+}
+
+/* Dashed crosshair lines */
+.joystick-crosshair {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+}
+
+.joystick-crosshair::before,
+.joystick-crosshair::after {
+    content: "";
+    position: absolute;
+}
+
+.joystick-crosshair::before {
+    width: 0;
+    height: 100%;
+    left: 50%;
+    top: 0;
+    border-left: 1px dashed var(--separator-bg);
+}
+
+.joystick-crosshair::after {
+    width: 100%;
+    height: 0;
+    top: 50%;
+    left: 0;
+    border-top: 1px dashed var(--separator-bg);
+}
+
+/* Home position dot at center */
+.joystick-home-dot {
+    position: absolute;
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background: var(--text-muted);
+    opacity: 0.35;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+}
+
+/* 3D convex knob */
+.joystick-knob {
+    position: absolute;
+    width: 28px;
+    height: 28px;
+    background: linear-gradient(145deg, #6dd0f7 0%, var(--accent-blue) 60%, #0a7bb5 100%);
+    border: 2px solid var(--accent-blue);
+    border-radius: 50%;
+    cursor: grab;
+    box-shadow: 0 2px 8px var(--accent-blue-bg-strong), inset 0 1px 2px rgba(255,255,255,0.25);
+    transition: box-shadow 0.15s ease;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.joystick-knob-highlight {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: radial-gradient(circle at 38% 32%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 65%);
+    pointer-events: none;
+}
+
+.joystick-knob:hover {
+    box-shadow: 0 2px 16px var(--accent-blue-bg-stronger), inset 0 1px 2px rgba(255,255,255,0.25);
+}
+
+.joystick-knob:active,
+.joystick-knob.dragging {
+    cursor: grabbing;
+    animation: joystick-knob-pulse 0.9s ease-in-out infinite;
+}
+
+@keyframes joystick-knob-pulse {
+    0%, 100% { box-shadow: 0 0 0 4px var(--accent-blue-bg), 0 2px 14px var(--accent-blue-bg-stronger), inset 0 1px 2px rgba(255,255,255,0.25); }
+    50%      { box-shadow: 0 0 0 8px var(--accent-blue-bg), 0 2px 20px var(--accent-blue-bg-stronger), inset 0 1px 2px rgba(255,255,255,0.25); }
+}
+
+/* Horizontal gauge bars */
+.joystick-gauges {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    flex-shrink: 0;
+}
+
+.joystick-gauge-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 6px;
+    height: 16px;
+}
+
+.joystick-gauge-label {
+    font-family: var(--font-mono);
+    font-size: 0.65rem;
+    color: var(--text-muted);
+    width: 32px;
+    flex: 0 0 32px;
+    text-align: left;
+}
+
+.joystick-gauge-track {
+    flex: 1 1 0%;
+    min-width: 0;
+    height: 8px;
+    background: var(--input-bg-deeper);
+    border: 1px solid var(--glass-border-subtle);
+    border-radius: 4px;
+    overflow: hidden;
+    position: relative;
+}
+
+.joystick-gauge-fill {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    border-radius: 3px;
+    width: 50%;
+    transition: width 0.05s linear;
+}
+
+.joystick-gauge-x-fill {
+    background: linear-gradient(90deg, var(--accent-blue-bg-stronger) 0%, var(--accent-blue) 100%);
+}
+
+.joystick-gauge-y-fill {
+    background: linear-gradient(90deg, var(--accent-orange-bg-strong) 0%, var(--accent-orange) 100%);
+}
+
+.joystick-gauge-value {
+    font-family: var(--font-mono);
+    font-size: 0.7rem;
+    color: var(--accent-green);
+    width: 26px;
+    flex: 0 0 26px;
+    text-align: right;
+}
+
+/* Arcade-style buttons with LED indicators */
+.joystick-buttons {
+    display: flex;
+    gap: 8px;
+    flex-shrink: 0;
+}
+
+.joystick-btn {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    padding: 10px 12px;
+    font-family: var(--font-mono);
+    font-size: 0.7rem;
+    color: var(--text-primary);
+    background: var(--control-bg);
+    border: 1px solid var(--glass-border);
+    border-bottom: 3px solid var(--glass-border);
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    transition: all 0.1s ease;
+    user-select: none;
+}
+
+.joystick-btn-led {
+    display: inline-block;
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: var(--text-muted);
+    opacity: 0.25;
+    flex-shrink: 0;
+    transition: all 0.1s ease;
+    box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
+}
+
+.joystick-btn-label {
+    pointer-events: none;
+}
+
+.joystick-btn:hover {
+    background: var(--control-bg-hover);
+    border-color: var(--control-border-hover);
+}
+
+.joystick-btn.pressed,
+.joystick-btn:active {
+    background: var(--accent-green-bg);
+    border-color: var(--accent-green-border);
+    border-bottom-width: 1px;
+    transform: translateY(2px);
+    color: var(--accent-green);
+}
+
+.joystick-btn.pressed .joystick-btn-led,
+.joystick-btn:active .joystick-btn-led {
+    background: var(--accent-green);
+    opacity: 1;
+    box-shadow: 0 0 6px var(--accent-green-bg-stronger), 0 0 2px var(--accent-green);
+}
+
+/* Center / target icon button */
+.joystick-center-btn-container {
+    display: flex;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.joystick-center-btn {
+    width: 26px;
+    height: 26px;
+    padding: 0;
+    font-size: 0.95rem;
+    line-height: 1;
+    color: var(--text-muted);
+    background: var(--glass-bg-header);
+    border: 1px solid var(--control-border);
+    border-radius: 50%;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.joystick-center-btn:hover {
+    color: var(--text-primary);
+    background: var(--control-bg-hover);
+    border-color: var(--control-border-hover);
+}
+
+/* Gamepad section */
+.gamepad-section {
+    border-top: 1px solid var(--glass-border);
+    padding-top: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    flex-shrink: 0;
+}
+
+.gamepad-status-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+}
+
+.gamepad-toggle-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    flex-shrink: 0;
+}
+
+/* Custom pill-shaped toggle switch */
+.gamepad-toggle-switch {
+    position: relative;
+    display: inline-block;
+    width: 34px;
+    height: 18px;
+    flex-shrink: 0;
+}
+
+.gamepad-toggle-switch > input.gamepad-toggle {
+    position: absolute;
+    width: 34px;
+    height: 18px;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    cursor: pointer;
+    z-index: 1;
+}
+
+.gamepad-toggle-slider {
+    position: absolute;
+    inset: 0;
+    background: var(--control-bg-solid);
+    border: 1px solid var(--glass-border);
+    border-radius: 9px;
+    pointer-events: none;
+    transition: background 0.2s ease, border-color 0.2s ease;
+}
+
+.gamepad-toggle-slider::before {
+    content: "";
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    left: 2px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: var(--text-muted);
+    border-radius: 50%;
+    transition: left 0.2s ease, background 0.2s ease;
+}
+
+.gamepad-toggle:checked ~ .gamepad-toggle-slider {
+    background: var(--accent-green-bg-strong);
+    border-color: var(--accent-green-border);
+}
+
+.gamepad-toggle:checked ~ .gamepad-toggle-slider::before {
+    left: 18px;
+    background: var(--accent-green);
+}
+
+.gamepad-toggle-text {
+    font-family: var(--font-mono);
+    font-size: 0.7rem;
+    color: var(--text-primary);
+}
+
+/* Gamepad status with dot indicator */
+.gamepad-status {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-family: var(--font-mono);
+    font-size: 0.65rem;
+    color: var(--text-muted);
+    overflow: hidden;
+    white-space: nowrap;
+    min-width: 0;
+}
+
+.gamepad-status-dot {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--text-muted);
+    opacity: 0.25;
+    flex-shrink: 0;
+    transition: all 0.2s ease;
+}
+
+.gamepad-status-dot.connected {
+    background: var(--accent-green);
+    opacity: 1;
+    box-shadow: 0 0 4px var(--accent-green-bg-stronger);
+}
+
+.gamepad-status-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.gamepad-deadzone-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.gamepad-deadzone-label {
+    font-family: var(--font-mono);
+    font-size: 0.65rem;
+    color: var(--text-muted);
+    flex-shrink: 0;
+}
+
+.gamepad-deadzone-slider {
+    flex: 1;
+    height: 4px;
+    cursor: pointer;
+}
+
+.gamepad-deadzone-value {
+    font-family: var(--font-mono);
+    font-size: 0.65rem;
+    color: var(--text-secondary);
+    min-width: 28px;
+    text-align: right;
+}
+
+
+/* ============================================
+   SLOT CONFIGURATION WINDOW
+   ============================================ */
+
+.slot-config-content {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    font-family: var(--font-sans);
+    font-size: 11px;
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+/* Slot section container */
+.slot-section {
+    background: var(--input-bg);
+    border-radius: var(--radius-sm);
+    padding: 8px;
+}
+
+.slot-section-title {
+    font-size: 9px;
+    font-weight: 600;
+    color: var(--accent-blue);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    margin-bottom: 8px;
+    padding-bottom: 4px;
+    border-bottom: 1px solid var(--accent-blue-bg-strong);
+}
+
+/* ---- Card Tray ---- */
+.card-tray {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    min-height: 40px;
+    align-items: flex-start;
+}
+
+.card-tray-empty {
+    width: 100%;
+    text-align: center;
+    font-size: 10px;
+    color: var(--text-muted);
+    font-style: italic;
+    padding: 10px 0;
+}
+
+/* Card tile (shared between tray and slot) */
+.card-tile {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    width: 76px;
+    height: 56px;
+    border-radius: var(--radius-sm);
+    border: 1px solid transparent;
+    cursor: grab;
+    user-select: none;
+    transition: transform 0.12s, opacity 0.12s, box-shadow 0.12s;
+}
+
+.card-tile:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
+}
+
+.card-tile:active {
+    cursor: grabbing;
+}
+
+.card-tile-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 0;
+}
+
+.card-tile-name {
+    font-size: 8px;
+    font-weight: 600;
+    text-align: center;
+    white-space: nowrap;
+    letter-spacing: 0.02em;
+}
+
+/* Card accent colors */
+.card-color-green {
+    background: var(--accent-green-bg);
+    border-color: var(--accent-green-border-light);
+    color: var(--accent-green);
+}
+
+.card-color-green:hover {
+    border-color: var(--accent-green-border);
+}
+
+.card-color-purple {
+    background: var(--accent-purple-bg);
+    border-color: rgba(181, 93, 182, 0.25);
+    color: var(--accent-purple);
+}
+
+.card-color-purple:hover {
+    border-color: rgba(181, 93, 182, 0.5);
+}
+
+.card-color-orange {
+    background: var(--accent-orange-bg);
+    border-color: var(--accent-orange-border);
+    color: var(--accent-orange);
+}
+
+.card-color-orange:hover {
+    border-color: var(--accent-orange-border-strong);
+}
+
+.card-color-blue {
+    background: var(--accent-blue-bg);
+    border-color: var(--accent-blue-border-light);
+    color: var(--accent-blue);
+}
+
+.card-color-blue:hover {
+    border-color: var(--accent-blue-border);
+}
+
+.card-color-red {
+    background: var(--accent-red-bg);
+    border-color: var(--accent-red-border);
+    color: var(--accent-red);
+}
+
+.card-color-red:hover {
+    border-color: var(--accent-red-border);
+}
+
+/* Dragging state — dim origin card */
+.card-tile.card-dragging {
+    opacity: 0.3;
+    transform: none;
+    box-shadow: none;
+}
+
+/* Ghost element that follows cursor */
+.card-ghost {
+    position: fixed;
+    z-index: 99999;
+    pointer-events: none;
+    opacity: 0.85;
+    transform: scale(1.05);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
+}
+
+/* ---- Motherboard Slots ---- */
+.motherboard-slots {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+}
+
+.mb-slot-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 3px 6px;
+    border-radius: var(--radius-sm);
+    border: 1px solid transparent;
+    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
+}
+
+.mb-slot-badge {
+    flex-shrink: 0;
+    width: 26px;
+    padding: 2px 0;
+    font-family: var(--font-mono);
+    font-size: 10px;
+    font-weight: 700;
+    text-align: center;
+    color: var(--accent-blue);
+    background: var(--accent-blue-bg);
+    border-radius: var(--radius-sm);
+}
+
+.mb-slot-connector {
+    flex: 1;
+    min-width: 0;
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 44px;
+    background: var(--slot-connector-bg, var(--input-bg-dark));
+    border: 1px solid var(--slot-connector-border, transparent);
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+}
+
+/* Edge-connector teeth pattern */
+.mb-connector-teeth {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+    background: repeating-linear-gradient(
+        90deg,
+        var(--text-muted) 0px,
+        var(--text-muted) 4px,
+        transparent 4px,
+        transparent 8px
+    );
+    opacity: 0.12;
+    border-radius: var(--radius-sm);
+    mask-image: linear-gradient(to bottom, black 0px, black 6px, transparent 6px, transparent calc(100% - 6px), black calc(100% - 6px), black 100%);
+    -webkit-mask-image: linear-gradient(to bottom, black 0px, black 6px, transparent 6px, transparent calc(100% - 6px), black calc(100% - 6px), black 100%);
+}
+
+/* Card sitting in a slot */
+.mb-slot-card {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-direction: row;
+    width: 100%;
+    height: 100%;
+    padding: 0 10px;
+    cursor: grab;
+    user-select: none;
+    z-index: 1;
+    border-radius: var(--radius-sm);
+    transition: opacity 0.12s;
+}
+
+.mb-slot-card .card-tile-icon {
+    flex-shrink: 0;
+}
+
+.mb-slot-card .card-tile-name {
+    font-size: 10px;
+    white-space: nowrap;
+}
+
+.mb-slot-card:active {
+    cursor: grabbing;
+}
+
+.mb-slot-card.card-dragging {
+    opacity: 0.3;
+}
+
+/* Fixed slot (slot 3) */
+.mb-slot-card-fixed {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    width: 100%;
+    height: 100%;
+    padding: 0 10px;
+    font-size: 10px;
+    color: var(--text-muted);
+    font-style: italic;
+    z-index: 1;
+}
+
+.mb-lock-icon {
+    font-size: 10px;
+    opacity: 0.6;
+    font-style: normal;
+}
+
+.mb-slot-fixed {
+    opacity: 0.6;
+}
+
+.mb-slot-fixed .mb-slot-badge {
+    opacity: 0.6;
+}
+
+/* Empty slot drop zone */
+.mb-slot-dropzone {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    font-size: 9px;
+    color: var(--text-muted);
+    opacity: 0.5;
+    z-index: 1;
+    border: 1px dashed var(--control-border);
+    border-radius: var(--radius-sm);
+    margin: 4px;
+}
+
+.mb-slot-note {
+    flex-shrink: 0;
+    width: 80px;
+    font-size: 9px;
+    color: var(--text-muted);
+    text-align: right;
+}
+
+/* Compatibility highlights during drag */
+.mb-slot-compat {
+    border-color: var(--accent-green-border);
+    background: var(--accent-green-bg);
+    box-shadow: 0 0 8px var(--accent-green-bg-strong);
+}
+
+.mb-slot-compat .mb-slot-dropzone {
+    border-color: var(--accent-green-border);
+    color: var(--accent-green);
+    opacity: 1;
+}
+
+.mb-slot-incompat {
+    border-color: var(--accent-red-border);
+    background: var(--accent-red-bg);
+}
+
+.mb-slot-incompat .mb-slot-dropzone {
+    border-color: var(--accent-red-border);
+    color: var(--accent-red);
+    opacity: 0.7;
+}
+
+/* Rejection flash animation */
+.mb-slot-reject {
+    animation: slot-reject-flash 0.4s ease;
+}
+
+@keyframes slot-reject-flash {
+    0%, 100% { border-color: transparent; background: transparent; }
+    25%, 75% { border-color: var(--accent-red-border); background: var(--accent-red-bg-stronger); }
+}
+
+/* Light theme: stronger slot contrast */
+[data-theme="light"] .mb-slot-connector {
+    --slot-connector-bg: rgba(208, 215, 222, 0.5);
+    --slot-connector-border: rgba(208, 215, 222, 0.6);
+}
+
+[data-theme="light"] .mb-connector-teeth {
+    opacity: 0.25;
+}
+
+[data-theme="light"] .mb-slot-dropzone {
+    border-color: rgba(175, 184, 193, 0.5);
+}
+
+/* ---- Footer ---- */
+.slot-footer {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding-top: 8px;
+    border-top: 1px solid var(--control-border);
+}
+
+.slot-apply-btn {
+    width: 100%;
+    padding: 6px 12px;
+    font-family: var(--font-sans);
+    font-size: 10px;
+    font-weight: 500;
+    background: var(--glass-bg-header);
+    border: 1px solid var(--control-border);
+    border-radius: var(--radius-sm);
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: all 0.15s;
+}
+
+.slot-apply-btn:hover:not(:disabled) {
+    background: var(--accent-green-bg-strong);
+    border-color: var(--accent-green-border);
+    color: var(--accent-green);
+}
+
+.slot-apply-btn.has-changes {
+    background: var(--accent-orange-bg);
+    border-color: var(--accent-orange-border);
+    color: var(--accent-orange);
+}
+
+.slot-apply-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+