/* Rocket Spider: the table, card positions and motion. Cards, backs, tables, the bar and sheets come from the card kit. */
.sp { max-width: 1180px; margin: 0 auto; padding: 6px 4px 12px; display: flex; flex-direction: column; }
.sp-table { position: relative; border-radius: 12px; overflow: hidden; outline: none; touch-action: manipulation; min-height: 300px; flex: none; }
.sp-layer { position: absolute; inset: 0; }
.sp-layer > * { position: absolute; left: 0; top: 0; }
.sp-layer .ck-card { translate: 0 0; transition: translate .26s cubic-bezier(.2,.8,.2,1), box-shadow .15s; will-change: translate; cursor: pointer; }
.sp-layer.sp-instant .ck-card, .sp-layer.sp-instant > * { transition: none !important; }
.sp-layer .ck-card.ck-down { cursor: default; }
.sp-layer .ck-card.sp-air { box-shadow: 0 0 0 0.6px rgba(0,0,0,0.3), 0 8px 18px rgba(0,0,0,0.38); }
.sp-layer .ck-card.sp-drag { transition: box-shadow .15s; box-shadow: 0 0 0 0.6px rgba(0,0,0,0.25), 0 14px 28px rgba(0,0,0,0.5); cursor: grabbing; }
.sp-layer .ck-card.sp-flipping { animation: sp-flip .26s ease-out; }
@keyframes sp-flip { 0% { transform: scaleX(0.04); } 100% { transform: none; } }
.sp-layer .ck-card.sp-sel { box-shadow: inset 0 0 0 3px #ffd166, 0 1px 2px rgba(0,0,0,0.4); }
.sp-layer .ck-card.sp-hint { box-shadow: inset 0 0 0 3px #55d6ff, 0 1px 2px rgba(0,0,0,0.4); animation: sp-glow 0.9s ease-in-out 3; }
.sp-layer .ck-card.sp-hint-dst { box-shadow: 0 0 0 3px #55d6ff, 0 1px 2px rgba(0,0,0,0.4); animation: sp-glow 0.9s ease-in-out 3; }
@keyframes sp-glow { 50% { box-shadow: inset 0 0 0 3px #55d6ff, 0 0 18px 4px rgba(85,214,255,0.6); } }
.sp-slot, .sp-fslot, .sp-sslot, .sp-target { width: var(--cw); height: var(--ch); border-radius: calc(var(--cw) * 0.1); pointer-events: none; }
.sp-slot { box-shadow: inset 0 0 0 1px var(--ck-slot); background: rgba(0,0,0,0.1); }
.sp-slot.sp-pulse { animation: sp-pulse .8s ease 2; }
.sp-slot.sp-hint-to { box-shadow: inset 0 0 0 3px #55d6ff; animation: sp-pulse 0.9s ease-in-out 3; }
@keyframes sp-pulse { 50% { box-shadow: inset 0 0 0 3px #ffd166, 0 0 16px rgba(255,209,102,0.5); } }
.sp-fslot { box-shadow: inset 0 0 0 1px rgba(255,209,102,0.3); background: rgba(255,255,255,0.03); display: grid; place-items: center; }
.sp-fslot span { color: rgba(255,209,102,0.3); font-weight: 800; font-size: calc(var(--cw) * 0.36); }
.sp-sslot { box-shadow: inset 0 0 0 1px var(--ck-slot); background: rgba(0,0,0,0.12); }
.sp-sslot.sp-empty::after { content: ''; position: absolute; inset: 28%; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.18); }
.sp-sslot.sp-hint-to { z-index: 70; box-shadow: 0 0 0 3px #55d6ff, 0 0 18px rgba(85,214,255,0.6); animation: sp-pulse 0.9s ease-in-out 3; }
.sp-target { z-index: 900; box-shadow: 0 0 0 3px #55d6ff, 0 0 18px rgba(85,214,255,0.55); }
.sp-badge { z-index: 80; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #ffd166; color: #1a1200; font-size: 12px; font-weight: 800; line-height: 20px; text-align: center; pointer-events: none; box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.sp-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1200; }
.sp-table .ck-toast { z-index: 1300; }
.sp-chip-sub, .sp-suits { color: #8aa3c4; }
.sp-status { margin-top: 6px; }
/* sheets */
.sp-grid3 { grid-template-columns: repeat(3, 1fr); }
.sp-tab { min-height: 220px; }
.sp-daily { display: flex; align-items: center; gap: 12px; width: 100%; margin: 14px 0 0; padding: 12px; border-radius: 14px; border: 1px solid #2a3d63; background: linear-gradient(135deg, #142650, #0d1838); color: #dfe9ff; font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
.sp-daily:hover { border-color: #55d6ff; }
.sp-daily:focus-visible { outline: 2px solid #55d6ff; outline-offset: 2px; }
.sp-daily-cal { flex: none; width: 52px; height: 56px; border-radius: 10px; background: #ffd166; color: #1a1200; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.sp-daily-cal b { font-size: 24px; }
.sp-daily-cal small { font-size: 11px; font-weight: 800; text-transform: uppercase; margin-top: 2px; }
.sp-daily-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sp-daily-txt b { font-size: 16px; color: #fff; }
.sp-daily-txt small { font-size: 12.5px; color: #8aa3c4; line-height: 1.35; }
.sp-daily-txt .sp-streak b { font-size: 12.5px; color: #ffd166; }
.sp-board .ck-board { font-size: 13px; }
.sp-board .sp-bt { color: #8aa3c4; font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }
.sp-unlock { background: rgba(255,209,102,0.12); border: 1px solid rgba(255,209,102,0.4); border-radius: 10px; padding: 8px 10px; color: #ffe7a8 !important; }
.sp-intro { margin: 8px 0 12px; padding-left: 18px; color: #c9d6ea; font-size: 14px; line-height: 1.5; }
.sp-intro li { margin: 0 0 6px; }
.sp-intro b { color: #fff; }
/* full screen: the table takes the room left by the bar */
.is-immersive .sp { max-width: none; width: 100%; height: 100%; padding: 4px 2px 4px; }
.is-immersive .sp-table { flex: 1 1 auto; min-height: 0; }
.is-immersive .sp-help { display: none; }
.is-immersive .sp-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
@media (max-width: 560px) {
  .sp { padding: 4px 0 10px; }
  .sp-bar .ck-info { gap: 8px; }
  .sp-bar .ck-chip { padding: 0 9px; }
  .sp-suits { display: none; }
}
@media (max-height: 500px) and (orientation: landscape) { .is-immersive .sp-bar { margin-bottom: 4px; } .is-immersive .sp-bar .ck-btn, .is-immersive .sp-bar .ck-chip { min-height: 34px; } }
@media (prefers-reduced-motion: reduce) { .sp-layer .ck-card { transition: none; } .sp-layer .ck-card.sp-flipping { animation: none; } }