/* Spider game styles — follow solitaire look & feel */
:root {
    --sp-card-w: 48px;
    --sp-card-h: 68px;
}

.app-header {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

.spider-controls {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-direction: column; /* stack Mode, Controls, Meta vertically */
    width: 100%;
}

.sp-controls-actions { display:flex; gap:8px; align-items:center; margin-top:6px }
.spider-meta { margin-left:0; display:flex; gap:12px; align-items:center; margin-top:8px }
.sp-timer, .sp-best { background: var(--surface-soft); padding:6px 10px; border-radius:8px; font-weight:700; color: var(--text); font-size:13px }
.sp-timer span, .sp-best span { font-weight:800 }
.btn-secondary#spider-pause { background: transparent; border:1px solid var(--border); padding:8px 12px; color: var(--text) }


.spider-embed { width: 100%; box-sizing: border-box; overflow: hidden; }
.spider-board {
    padding: 12px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    background: var(--surface);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(15,23,42,0.06);
    overflow: hidden;
    box-sizing: border-box;
}

/* ensure board has a constrained height so stacks fit and scroll if needed */
.spider-board { max-height: 360px; min-height: 260px }

.sp-top {
    display: flex;
    gap: 12px;
    align-items: center
}

.sp-stock,
.sp-foundations {
    display: flex;
    gap: 8px
}

/* Stock preview: show stacked last cards horizontally with overlap */
.sp-stock {
    display: flex;
    align-items: center;
    position: relative;
    min-height: var(--sp-card-h);
    padding: 6px;
}
.sp-stock .sp-card {
    position: relative; /* allow transform offsets */
    margin-left: -28px; /* overlap */
    transition: transform 0.12s ease;
}
.sp-stock .sp-card:first-child { margin-left: 0; }
.sp-stock .sp-card[style*="pointer-events: none"] { cursor: default; opacity: 0.96; }
.sp-stock .sp-card.face-up { cursor: pointer; }

.sp-tableau {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 12px 8px 20px 8px;
    -webkit-overflow-scrolling: touch;
    min-width: 0; /* prevent flex child from forcing parent width */
    justify-content: center;
    margin-top: 55px;
}

.sp-col {
    width: var(--sp-card-w);
    min-height: 280px;
    position: relative;
    flex: 0 0 auto;
}

.sp-card {
    width: var(--sp-card-w);
    height: var(--sp-card-h);
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.sp-card.face-up { cursor: pointer; }
.sp-card.selected { transform: translateY(-8px) scale(1.03); border-color: var(--accent); box-shadow: 0 16px 36px rgba(15,23,42,0.12); }

/* Hint highlight for suggested moves */
.sp-card.hint {
    animation: sp-hint-pulse 1.2s infinite ease-in-out;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.18), 0 12px 28px rgba(59,130,246,0.12);
    transform: translateY(-6px) scale(1.02);
    border-color: rgba(59,130,246,0.9);
}
@keyframes sp-hint-pulse { 0% { box-shadow: 0 0 0 0 rgba(59,130,246,0.18); } 70% { box-shadow: 0 0 0 6px rgba(59,130,246,0); } 100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); } }

.sp-card.back {
    background: linear-gradient(135deg, #2f80ed, #a5b4fc);
    color: transparent
}

.sp-card.face-down {
    background: linear-gradient(180deg, #0b8a5f, #0b5f3a);
    color: transparent
}

.sp-card .mini {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 12px;
    font-weight: 700;
    pointer-events: none;
}

.sp-card .center {
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 800;
}

.sp-card.red {
    color: var(--danger-dark);
}

.sp-hint {
    color: var(--text-muted);
    font-size: 14px
}

/* Layout of control area (red box) */
.spider-embed > header.app-header {
    padding: 8px 2px;
    margin-bottom: 8px;
}
.spider-controls select {
    margin-right: 8px;
}

/* Style the spider mode select to match app controls */
#spider-mode,
.spider-controls select {
    -webkit-appearance: none;
    appearance: none;
    padding: 8px 12px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, var(--surface), var(--surface-soft));
    border-radius: 8px;
    color: var(--text);
    font-weight: 600;
    font-size: 13px;
    min-width: 110px;
    box-shadow: none;
}

/* ensure native option list respects theme variables where supported */
#spider-mode option, .spider-controls select option {
    background: var(--surface);
    color: var(--text);
}

/* dark-mode safety: when app uses dark theme, make select and options dark too */
body[data-theme="dark"] #spider-mode,
body[data-theme="dark"] .spider-controls select {
    background: linear-gradient(180deg, var(--surface), var(--surface-soft));
    color: var(--text);
    border-color: rgba(255,255,255,0.06);
}
body[data-theme="dark"] #spider-mode option,
body[data-theme="dark"] .spider-controls select option {
    background: var(--surface);
    color: var(--text);
}

/* add a subtle arrow using inline SVG so the select looks native */
#spider-mode {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'><path d='M0 0 L5 7 L10 0z' fill='%230f172a' opacity='0.9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 36px;
}

/* smaller on mobile */
@media (max-width: 640px) {
    #spider-mode, .spider-controls select { min-width: 88px; padding: 6px 10px; font-size: 12px }
}

/* make sure scrollbar doesn't overlap content badly */
.sp-tableau::-webkit-scrollbar{ height:10px }
.sp-tableau::-webkit-scrollbar-thumb{ background: rgba(0,0,0,0.08); border-radius:6px }

@media (max-width: 640px) {
    .spider-board { padding:8px }
    .sp-col { min-height: 220px }
}

/* Strong overrides for stock preview to ensure they are not positioned absolutely
   (must come after .sp-card rules so they take effect). */
.sp-stock .sp-card {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    display: inline-block !important;
    margin-left: -28px !important;
    transform-origin: center bottom !important;
}
.sp-stock .sp-card:first-child { margin-left: 0 !important; }
.sp-stock .sp-card.sp-stock-instance { box-shadow: 0 6px 18px rgba(15,23,42,0.08); }

@media (max-width: 640px) {
    .sp-tableau {
        gap: 8px
    }

    :root {
        --sp-card-w: 32px;
        --sp-card-h: 56px
    }
}