/* ========================================
   Spider Solitär - 完全参考首页Klondike的尺寸和响应式系统
   10-column layout optimization
   ======================================== */

/* Spider-specific CSS Variables - 参考首页Klondike，尽可能大 */
:root {
    /* Spider 10列布局 - 尽可能使用全部空间 */
    --spider-spacing: 0.4vw;
    --spider-card-width: calc(((100vw - 2vw - 9 * var(--spider-spacing)) / 10) * 0.98);
    --spider-card-height: calc(var(--spider-card-width) * 1.4);
    --spider-card-border-radius: calc(var(--spider-card-width) * 0.08);
    
    /* 最小和最大尺寸 - 参考首页 */
    --spider-min-card-width: 77px;
    --spider-min-card-height: 108px;
    --spider-max-card-width: 180px;  /* 增大最大宽度 */
    --spider-max-card-height: 252px;
    
    /* Card stacking由JavaScript动态控制 */
}

/* ========================================
   Spider Game Container
   ======================================== */
.spider-game-container {
    max-width: 100%;
    margin: 1rem auto;
    padding: 0 0.5rem;
}

/* ========================================
   Spider Top Area - 顶部区域：发牌区+完成区
   ======================================== */
.spider-top-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 0 0.5rem;
    gap: 2rem;
}

/* 左侧：发牌堆包装器 */
.spider-stock-wrapper {
    flex-shrink: 0;
}

/* 右侧：8个完成区 */
.spider-foundations {
    display: flex;
    gap: var(--spider-spacing);
    justify-content: flex-end;
    flex: 1;
}

.foundation-slot {
    width: clamp(var(--spider-min-card-width), var(--spider-card-width), var(--spider-max-card-width));
    height: clamp(var(--spider-min-card-height), var(--spider-card-height), var(--spider-max-card-height));
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--spider-card-border-radius);
    position: relative;
    flex-shrink: 0;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    /* 使用06.webp作为背景 */
    background-image: url('../images/back/06.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 如果需要禁用背景图片，添加 .no-background 类 */
.foundation-slot.no-background {
    background-image: none;
}

.foundation-slot .card {
    position: absolute;
    top: 0;
    left: 0;
}

/* ========================================
   Spider Stock - 发牌堆（显示纸牌背面）
   ======================================== */
.spider-stock {
    width: clamp(var(--spider-min-card-width), var(--spider-card-width), var(--spider-max-card-width));
    height: clamp(var(--spider-min-card-height), var(--spider-card-height), var(--spider-max-card-height));
    border: none;
    border-radius: var(--spider-card-border-radius);
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    overflow: hidden;
}

.spider-stock::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/cards/Back.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.spider-stock #stockCount {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(26, 77, 46, 0.95);
    padding: 0.4rem 0.8rem;
    border-radius: 50%;
    border: 2px solid white;
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    min-width: 3rem;
    text-align: center;
    z-index: 2;
}

.spider-stock:hover:not(:disabled) {
    transform: scale(1.05);
    filter: brightness(1.1);
}

.spider-stock:active:not(:disabled) {
    transform: scale(0.98);
}

.spider-stock:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(100%);
}

/* ========================================
   Spider Tableau - 10 columns
   ======================================== */
.spider-tableau {
    display: flex;
    gap: var(--spider-spacing);
    justify-content: center;
    min-height: 500px;
    padding: 0 0.5rem;
    flex: 1;
    width: 100%;
}

.spider-column {
    flex: 1;
    width: clamp(var(--spider-min-card-width), var(--spider-card-width), var(--spider-max-card-width));
    max-width: clamp(var(--spider-min-card-width), var(--spider-card-width), var(--spider-max-card-width));
    position: relative;
    min-height: 400px;
    border: 2px dashed transparent;
    border-radius: var(--spider-card-border-radius);
    padding: 0.25rem;
    transition: all 0.2s ease;
}

/* Empty column visual */
.spider-column:empty::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: clamp(var(--spider-min-card-height), var(--spider-card-height), var(--spider-max-card-height));
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: var(--spider-card-border-radius);
    background: rgba(0, 0, 0, 0.1);
}

/* 手机竖屏时空列占位符优化 */
@media screen and (max-width: 767px) and (orientation: portrait) {
    .spider-column:empty::after {
        border-width: 1px;
    }
}

.spider-column.drop-target {
    border-color: rgba(255, 215, 0, 0.6);
    background: rgba(255, 215, 0, 0.1);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

/* ========================================
   Cards in Spider columns（参考首页样式）
   ======================================== */
.spider-column .card {
    position: absolute;
    width: 100%;
    left: 50%;
    top: 0; /* 初始位置，由JavaScript动态控制 */
    transform: translateX(-50%) translateZ(0);
    cursor: grab;
    transition: transform 0.15s ease;
    z-index: calc(10 + var(--index, 0));
    /* GPU acceleration for smooth performance */
    will-change: transform;
    backface-visibility: hidden;
}

.spider-column .card:active {
    cursor: grabbing;
}

.spider-column .card.dragging {
    opacity: 0.6;
    transform: translateX(-50%) scale(1.05) translateZ(0);
    z-index: 1000;
    will-change: transform, opacity;
}

/* Use clamp for card dimensions */
.spider-column .card,
.foundation-slot .card {
    width: clamp(var(--spider-min-card-width), var(--spider-card-width), var(--spider-max-card-width));
    height: clamp(var(--spider-min-card-height), var(--spider-card-height), var(--spider-max-card-height));
}

.spider-column .card img,
.foundation-slot .card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    /* Performance optimization */
    transform: translateZ(0);
}

/* Card stacking positioning is handled by JavaScript for optimal stacking */

.spider-column .card.face-down {
    cursor: default;
    z-index: calc(5 + var(--index, 0));
}

.spider-column .card.face-up {
    z-index: calc(15 + var(--index, 0));
}

/* ========================================
   Hint Animations
   ======================================== */
@keyframes hint-pulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.8);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 25px 10px rgba(255, 215, 0, 0);
        transform: scale(1.08);
    }
}

.card.hint-flash {
    animation: hint-pulse 1s ease-in-out 2;
    border: 3px solid gold !important;
    z-index: 999;
}

.spider-column.hint-target {
    animation: hint-pulse 1s ease-in-out 2;
    border-color: gold !important;
}

/* ========================================
   响应式设计 - 完全参考首页Klondike的断点系统
   ======================================== */

/* 超宽屏幕 (>= 1440px) */
@media screen and (min-width: 1440px) {
    :root {
        --spider-card-width: calc(((100vw - 2vw - 9 * var(--spider-spacing)) / 10) * 0.9);
        --spider-max-card-width: 160px;  /* 增大 */
        --spider-max-card-height: 224px;
        --spider-spacing: 0.5vw;
    }
}

/* 平板横屏 (768px - 1024px landscape) */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    :root {
        --spider-card-width: calc(((100vw - 2vw - 9 * var(--spider-spacing)) / 10) * 0.95);
        --spider-spacing: 0.3vw;
    }
}

/* 平板竖屏 (768px - 1024px portrait) */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    :root {
        --spider-card-width: calc(((100vw - 2vw - 9 * var(--spider-spacing)) / 10) * 0.96);
        --spider-spacing: 0.35vw;
    }
    
    .spider-top-area {
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .spider-foundations {
        overflow-x: auto;
        padding-bottom: 0.5rem;
    }
}

/* 手机横屏 (<= 767px landscape) */
@media screen and (max-width: 767px) and (orientation: landscape) {
    :root {
        --spider-card-width: calc(((100vw - 1vw - 9 * var(--spider-spacing)) / 10));
        --spider-spacing: 0.15vw;
        --spider-min-card-width: clamp(42px, 11vh, 55px);  /* 增大 */
        --spider-min-card-height: clamp(59px, 15vh, 77px);
    }
    
    .spider-game-container {
        padding: 0 0.25rem;
    }
    
    .spider-top-area {
        margin-bottom: 0.75rem;
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    
    .spider-tableau {
        overflow-x: auto;
        min-height: 300px;
    }
}

/* 手机竖屏 (<= 767px portrait) - 优化10列显示 */
@media screen and (max-width: 767px) and (orientation: portrait) {
    :root {
        /* 动态计算：总宽度 - 左右padding - 9个间隙 / 10列 */
        --spider-spacing: 1px;
        --spider-card-width: calc((100vw - 1rem - 9px) / 10);
        --spider-card-height: calc(var(--spider-card-width) * 1.4);
        /* 移除最小宽度限制，让其完全自适应 */
        --spider-min-card-width: 32px;
        --spider-min-card-height: 45px;
    }
    
    .spider-game-container {
        padding: 0;
        margin: 0.5rem 0;
    }
    
    .spider-top-area {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
        padding: 0 0.5rem;
    }
    
    .spider-stock-wrapper {
        display: flex;
        justify-content: center;
    }
    
    .spider-foundations {
        overflow-x: auto;
        padding-bottom: 0.5rem;
        scrollbar-width: thin;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
    }
    
    .spider-foundations::-webkit-scrollbar {
        height: 4px;
    }
    
    .spider-foundations::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 2px;
    }
    
    .spider-tableau {
        overflow-x: visible;
        min-height: 400px;
        gap: var(--spider-spacing);
        padding: 0 0.5rem;
        justify-content: space-between;
    }
    
    .spider-column {
        flex: 0 0 auto;
        width: var(--spider-card-width);
        max-width: var(--spider-card-width);
        min-width: auto;
        padding: 0;
        min-height: 350px;
    }
    
    .spider-column .card {
        font-size: 0.7rem;
    }
    
    .spider-stock #stockCount {
        font-size: 1.1rem;
        padding: 0.3rem 0.6rem;
        min-width: 2.5rem;
    }
}

/* 极小屏幕手机 (<= 480px portrait) - 进一步优化 */
@media screen and (max-width: 480px) and (orientation: portrait) {
    :root {
        --spider-spacing: 0.5px;
        --spider-card-width: calc((100vw - 0.75rem - 4.5px) / 10);
        --spider-card-height: calc(var(--spider-card-width) * 1.4);
        --spider-min-card-width: 30px;
        --spider-min-card-height: 42px;
    }
    
    .spider-game-container {
        margin: 0.25rem 0;
    }
    
    .spider-top-area {
        gap: 0.4rem;
        margin-bottom: 0.5rem;
        padding: 0 0.375rem;
    }
    
    .spider-tableau {
        gap: var(--spider-spacing);
        padding: 0 0.375rem;
        min-height: 350px;
    }
    
    .spider-column {
        min-height: 300px;
    }
    
    .spider-column .card {
        font-size: 0.65rem;
    }
    
    .spider-stock #stockCount {
        font-size: 0.95rem;
        padding: 0.25rem 0.5rem;
        min-width: 2.25rem;
    }
}

/* iPhone SE 和超小屏幕 (<= 375px portrait) */
@media screen and (max-width: 375px) and (orientation: portrait) {
    :root {
        --spider-spacing: 0.5px;
        --spider-card-width: calc((100vw - 0.5rem - 4.5px) / 10);
        --spider-card-height: calc(var(--spider-card-width) * 1.4);
        --spider-min-card-width: 28px;
        --spider-min-card-height: 39px;
    }
    
    .spider-top-area {
        padding: 0 0.25rem;
    }
    
    .spider-tableau {
        padding: 0 0.25rem;
    }
    
    .spider-column .card {
        font-size: 0.6rem;
    }
    
    .spider-stock #stockCount {
        font-size: 0.85rem;
        padding: 0.2rem 0.4rem;
        min-width: 2rem;
    }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
    .spider-stock-area,
    .unified-header,
    .seo-content-section {
        display: none;
    }
    
    .spider-game-container {
        max-width: 100%;
    }
}