.spider-difficulty-btn{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:2px;cursor:pointer;height:32px;display:inline-flex;align-items:center;min-width:170px;margin-right:10px;&:hover { background:rgba(0,0,0,0.4); border-color:rgba(255,255,255,0.3); } &.difficulty-2 .difficulty-slider { transform:translateX(98%); } &.difficulty-4 .difficulty-slider { transform:translateX(200%); }}.difficulty-track{position:relative;width:100%;height:28px;display:flex;align-items:center;justify-content:space-between;padding:0 4px}.difficulty-option{font-size:clamp(10px,1vw,12px);font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:rgba(255,255,255,.6);z-index:2;padding:0 6px;text-align:center;flex:1;white-space:nowrap;&.active { color: #ffffff; }}.difficulty-slider{position:absolute;top:2px;left:2px;width:32%;height:24px;background:#4caf50;border-radius:16px;z-index:1;transition:transform .3s ease}.card.complete-sequence{box-shadow:0 0 15px rgba(76,175,80,.8);border:2px solid rgba(76,175,80,.9);&::after { content:""; position:absolute; top:-2px; left:-2px; right:-2px; bottom:-2px; border:2px solid #4caf50; border-radius:8px; pointer-events:none; animation:completeSequencePulse 2s infinite; }}@keyframes completeSequencePulse{0%,100%{opacity:.5}50%{opacity:1}}.stock-deal-animation{animation:stockDealFly .3s ease-out forwards}@keyframes stockDealFly{0%{transform:scale(1)rotate(0);opacity:1}50%{transform:scale(1.1)rotate(180deg);opacity:.8}100%{transform:scale(1)rotate(360deg);opacity:1}}.tableau-pile .card.sp-deal{animation:spStockToTableau .24s linear forwards;will-change:transform;backface-visibility:hidden}@keyframes spStockToTableau{0%{transform:translate(var(--sp-start-x,0px),var(--sp-start-y,0px))rotate(0)}100%{transform:translate(0,0)rotate(360deg)}}playing-card.card{touch-action:none;-webkit-user-select:none;user-select:none}playing-card.card>img{pointer-events:none;-webkit-user-drag:none}.pile .pile-background{pointer-events:none}.tableau-pile .card.sp-flip{animation:spFlip .3s ease-in-out;transform-style:preserve-3d;backface-visibility:hidden}@keyframes spFlip{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)}100%{transform:rotateY(0)}}.spider-hero,.spider-benefits,.spider-faq-section{width:min(1100px,100%);margin:0 auto;padding:1.5rem;box-sizing:border-box;border-radius:16px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,8%);backdrop-filter:blur(10px)}.spider-hero{display:flex;align-items:end;justify-content:space-between;gap:1.5rem}.spider-hero-copy{max-width:780px}.spider-hero-eyebrow{margin:0 0 .8rem;color:#9fd7a8;font-size:.95rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.spider-hero h1{margin:0;color:#fff;font-size:clamp(2rem,4vw,3.25rem);line-height:1.08}.spider-hero-intro{margin:1rem 0 0;max-width:60ch;font-size:1.08rem;line-height:1.75;color:rgba(255,255,255,.92)}.spider-hero-badges{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.25rem 0 0;padding:0;list-style:none}.spider-hero-badges li{padding:.55rem .85rem;border-radius:999px;background:rgba(76,175,80,.16);border:1px solid rgba(76,175,80,.28);color:#eefaf0;font-weight:600}.spider-hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;flex-shrink:0;align-items:center}.spider-hero-cta{min-width:180px;justify-content:center}.spider-hero-link{justify-content:center;background:0 0;border:1px solid rgba(255,255,255,.16)}.spider-hero-link:hover{background:rgba(255,255,255,8%)}.spider-benefits{margin-top:.5rem}.spider-faq-section{margin-top:.5rem}.spider-benefits-header,.spider-faq-header{max-width:760px;margin:0 auto 1rem;text-align:center}.spider-benefits-header p,.spider-faq-header p{margin:.5rem auto 0;max-width:70ch;color:rgba(255,255,255,.82)}.spider-benefit-grid,.spider-rule-grid,.spider-mode-grid,.spider-resource-grid,.spider-faq-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1.5rem}.spider-strategy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-top:1.25rem}.spider-checklist{display:grid;gap:.85rem;margin:1.5rem 0;padding:0;list-style:none}.spider-checklist li{position:relative;padding:.9rem 1rem .9rem 3rem;border-radius:12px;background:rgba(255,255,255,4%);border:1px solid rgba(255,255,255,8%)}.spider-checklist li::before{content:"✓";position:absolute;top:50%;left:1rem;transform:translateY(-50%);width:1.35rem;height:1.35rem;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:rgba(76,175,80,.16);color:#9fd7a8;font-weight:700}.spider-benefit-card,.spider-rule-card,.spider-mode-card,.spider-resource-card,.spider-faq-item,.spider-strategy-card{padding:1.15rem;border-radius:14px;background:rgba(255,255,255,4%);border:1px solid rgba(255,255,255,8%);box-shadow:0 8px 24px rgba(0,0,0,.16)}.spider-benefit-card h3,.spider-rule-card h3,.spider-mode-card h3,.spider-resource-card h3,.spider-faq-item h3,.spider-strategy-card h3{margin:0 0 10px;color:#fff;font-size:1.1rem}.spider-benefit-card p,.spider-rule-card p,.spider-mode-card p,.spider-resource-card p,.spider-faq-item p,.spider-strategy-card p{margin:0;max-width:none;color:rgba(255,255,255,.88)}.spider-content{padding-top:0}.spider-section+.spider-section{margin-top:2rem}.spider-content .spider-section>p,.spider-content .spider-section>ul{max-width:900px}.resource-link,.spider-resource-card h3 a,.spider-content a{color:#7fd687}.resource-link:hover,.spider-resource-card h3 a:hover,.spider-content a:hover{color:#a6efad}.spider-resource-card h3 a{text-decoration:none}.spider-resource-card h3 a:hover{text-decoration:underline}.mode-tag{display:inline-flex;align-items:center;margin:0 0 12px;padding:6px 10px;border-radius:999px;background:rgba(76,175,80,.12);color:#98d89b;font-size:.88rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}@media(max-width:900px){.spider-hero{align-items:start;flex-direction:column}.spider-hero-actions{width:100%}.spider-hero-cta,.spider-hero-link{width:100%}}@media(orientation:portrait){.spider-hero,.spider-benefits,.spider-faq-section{width:calc(100vw - 16px);padding:1.25rem}.spider-benefit-grid,.spider-rule-grid,.spider-mode-grid,.spider-strategy-grid,.spider-resource-grid,.spider-faq-list{grid-template-columns:1fr}.spider-difficulty-btn{min-width:150px}}