* { box-sizing: border-box; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

:root {
    --speed-mod: 1;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; filter: hue-rotate(0deg); }
    25% { background-position: 100% 50%; }
    50% { background-position: 100% 50%; filter: hue-rotate(180deg); }
    75% { background-position: 0% 50%; }
    100% { background-position: 0% 50%; filter: hue-rotate(360deg); }
}

body { 
    background: linear-gradient(-45deg, #1a161d, #2d1b3d, #1d1a3d, #3d1f2d, #1a3d2d);
    background-size: 400% 400%;
    animation: gradientShift 10s ease infinite;
    color: white; 
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
    overflow: hidden; 
    height: 100vh; height: 100dvh; 
    display: flex; 
    justify-content: center;
    margin: 0;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(236, 72, 153, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(163, 78, 120, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.video-bg {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    z-index: -1;
    opacity: 0.1;
    filter: blur(5px);
    pointer-events: none;
}

.app-container {
    width: 500px; 
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(45, 38, 49, 0.9);
    backdrop-filter: blur(10px);
    padding: 10px 20px calc(10px + env(safe-area-inset-bottom)) 20px;
    position: relative;
    box-shadow: 0 0 80px rgba(236, 72, 153, 0.3), 0 0 50px rgba(0,0,0,0.5);
    z-index: 1;
}

.fixed-core {
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    height: 100%;
    z-index: 30;
}

#board { 
    display: grid; grid-template-columns: repeat(4, 1fr); 
    gap: 8px; width: 100%; margin: 0 auto;
    flex-grow: 1; 
    align-content: center;
    min-height: 0;
    z-index: 40; 
}

#board.rotated {
    grid-template-columns: repeat(3, 1fr);
}

.hud-layer {
    position: absolute;
    top: 10px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 70; 
}
.hud-left, .hud-right { pointer-events: auto; }

.streak-counter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4.5rem;
    font-weight: 900;
    color: #ffd700;
    text-shadow: 
        0 0 20px #ffd700, 
        0 0 40px #ffd700,
        0 0 60px #ec4899,
        0 0 80px #ec4899;
    animation: streakPop 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    pointer-events: none;
    z-index: 150;
    filter: drop-shadow(0 0 30px #ffd700);
}

@keyframes streakPop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-180deg); }
    40% { opacity: 1; transform: translate(-50%, -50%) scale(1.4) rotate(10deg); }
    60% { transform: translate(-50%, -50%) scale(1.2) rotate(-5deg); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8) rotate(0deg); }
}

.settings-edge-container {
    position: absolute;
    right: 20px;
    bottom: 80px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    z-index: 80; 
}

.card-slot { aspect-ratio: 2/3; width: 100%; position: relative; }

#board.rotated .card-slot { aspect-ratio: 3/2; }

.card { 
    background: white; border-radius: 8px; 
    width: 100%; height: 100%; display: flex; flex-direction: column; 
    justify-content: center; align-items: center;
    padding: 2px; 
    transition: transform calc(0.15s * var(--speed-mod)) cubic-bezier(0.2, 0, 0.2, 1), opacity calc(0.1s * var(--speed-mod)) ease, border-color calc(0.15s * var(--speed-mod)) ease, box-shadow calc(0.15s * var(--speed-mod)) ease;
    border: 3px solid transparent; position: absolute; inset: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4), 0 0 0 rgba(236, 72, 153, 0);
    transform-origin: center center;
    will-change: transform, opacity;
    z-index: 1;
    overflow: hidden;
    pointer-events: auto;
}

.card:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(0,0,0,0.5), 0 0 20px rgba(236, 72, 153, 0.4);
}

@keyframes cardIdle {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-3px) rotate(0.5deg); }
    75% { transform: translateY(-3px) rotate(-0.5deg); }
}

.card.idle-float {
    animation: cardIdle 4s ease-in-out infinite;
}

#board.rotated .card {
    flex-direction: row;
}

.card.anim-in { animation: cardPop calc(0.35s * var(--speed-mod)) cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.card.selected { 
    border-color: #ec4899 !important; 
    transform: scale(0.88) !important; 
    z-index: 2;
    box-shadow: 0 0 30px rgba(236, 72, 153, 0.8), 0 0 60px rgba(236, 72, 153, 0.4) !important;
    animation: none !important;
}
.card.anim-out { 
    opacity: 0 !important; 
    transform: scale(0) rotate(720deg) !important; 
    transition: all calc(0.2s * var(--speed-mod)) ease-in !important;
    filter: hue-rotate(360deg) !important;
}

@keyframes cardJump {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.card.jumping { animation: cardJump 0.2s ease-out; }

@keyframes cardPop { 
    0% { opacity: 0; transform: scale(0.3) rotate(-180deg); } 
    50% { transform: scale(1.15) rotate(10deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); } 
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes confetti {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(400px) rotate(720deg); opacity: 0; }
}

.shake { animation: shake 0.4s ease-in-out; }

.confetti {
    position: fixed;
    width: 10px;
    height: 10px;
    z-index: 200;
    pointer-events: none;
    animation: confetti 1.5s ease-out forwards;
}

@keyframes hintPulse {
    0%, 100% { box-shadow: 0 4px 10px rgba(0,0,0,0.4), 0 0 0 rgba(255, 215, 0, 0); }
    50% { box-shadow: 0 4px 10px rgba(0,0,0,0.4), 0 0 30px rgba(255, 215, 0, 0.8), 0 0 60px rgba(255, 215, 0, 0.4); }
}

.card.hint-pulse {
    animation: hintPulse 2s ease-in-out infinite !important;
}

.live-leaderboard {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    background: rgba(45, 38, 49, 0.7);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(236, 72, 153, 0.5);
    border-radius: 15px;
    padding: 15px;
    min-width: 200px;
    box-shadow: 0 0 30px rgba(236, 72, 153, 0.3);
    z-index: 5;
    animation: leaderboardPulse 3s ease-in-out infinite;
}

@media (max-width: 768px) {
    .live-leaderboard {
        display: none;
    }
}

.leaderboard-title {
    font-size: 14px;
    font-weight: 900;
    text-align: center;
    background: linear-gradient(45deg, #ffd700, #ec4899, #00ffff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
    animation: rainbow 3s linear infinite;
}

@keyframes rainbow {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

@keyframes leaderboardPulse {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-50%) scale(1.02); }
}

.leaderboard-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    margin: 5px 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    font-size: 12px;
    animation: entrySlide 0.3s ease-out;
}

@keyframes entrySlide {
    from { transform: translateX(50px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.leaderboard-entry.you {
    background: linear-gradient(90deg, rgba(236, 72, 153, 0.3), rgba(163, 78, 120, 0.3));
    border: 1px solid #ec4899;
    font-weight: bold;
}

.flying-text {
    position: fixed;
    font-size: 2rem;
    font-weight: 900;
    pointer-events: none;
    z-index: 200;
    animation: flyUp 2s ease-out forwards;
    text-shadow: 0 0 10px currentColor;
}

@keyframes flyUp {
    0% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
    100% { opacity: 0; transform: translateY(-200px) scale(1.5) rotate(360deg); }
}

@keyframes screenFlash {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.3; }
}

.screen-flash {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 250;
    animation: screenFlash 0.3s ease-out;
}

.emoji-rain-item {
    position: fixed;
    font-size: 3rem;
    pointer-events: none;
    z-index: 180;
    animation: emojifall 3s linear forwards;
}

@keyframes emojifall {
    from { transform: translateY(-100px) rotate(0deg); opacity: 1; }
    to { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

.firework {
    position: fixed;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 190;
}

@keyframes fireworkExplode {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

.hype-meter {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(45, 38, 49, 0.9);
    backdrop-filter: blur(10px);
    border: 3px solid #ffd700;
    border-radius: 20px;
    padding: 15px 30px;
    min-width: 300px;
    z-index: 90;
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.6);
    animation: hypePulse 1s ease-in-out infinite;
    position: relative;
}

@keyframes hypePulse {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.05); }
}

.hype-label {
    font-size: 16px;
    font-weight: 900;
    text-align: center;
    background: linear-gradient(45deg, #ff0000, #ff7700, #ffff00, #00ff00, #0099ff, #cc00ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
    animation: rainbow 2s linear infinite;
    background-size: 200% 100%;
}

.hype-bar {
    width: 100%;
    height: 20px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    border: 2px solid rgba(255, 215, 0, 0.5);
}

.hype-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff0000, #ff7700, #ffff00, #00ff00, #0099ff, #cc00ff);
    background-size: 200% 100%;
    animation: rainbow 2s linear infinite, hypeGrow 0.5s ease-out;
    width: 0%;
    transition: width 0.3s ease-out;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
}

@keyframes hypeGrow {
    from { width: 0%; }
}

.hype-text {
    text-align: center;
    font-size: 14px;
    font-weight: 900;
    color: #ffd700;
    margin-top: 5px;
    text-shadow: 0 0 10px #ffd700;
}

@media (max-width: 768px) {
    .hype-meter {
        bottom: 10px;
        min-width: 250px;
        padding: 10px 20px;
    }
}

.ai-chat {
    position: fixed;
    left: 20px;
    bottom: 20px;
    width: 280px;
    height: 350px;
    background: rgba(45, 38, 49, 0.95);
    backdrop-filter: blur(15px);
    border: 2px solid #00ffff;
    border-radius: 15px;
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
    z-index: 95;
    display: flex;
    flex-direction: column;
    animation: aiPulse 2s ease-in-out infinite;
}

@keyframes aiPulse {
    0%, 100% { box-shadow: 0 0 30px rgba(0, 255, 255, 0.5); }
    50% { box-shadow: 0 0 50px rgba(0, 255, 255, 0.8); }
}

@media (max-width: 768px) {
    .ai-chat {
        width: 200px;
        height: 250px;
        left: 10px;
        bottom: 70px;
    }
}

.ai-chat-header {
    background: linear-gradient(90deg, #00ffff, #ff00ff);
    padding: 10px;
    border-radius: 13px 13px 0 0;
    font-weight: 900;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ai-minimize {
    background: rgba(0, 0, 0, 0.3);
    border: none;
    color: white;
    width: 25px;
    height: 25px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
}

.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-message {
    background: rgba(0, 255, 255, 0.2);
    padding: 8px 12px;
    border-radius: 10px;
    border-left: 3px solid #00ffff;
    animation: messageSlide 0.3s ease-out;
    font-size: 12px;
}

@keyframes messageSlide {
    from { transform: translateX(-20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.level-display {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(45, 38, 49, 0.9);
    backdrop-filter: blur(10px);
    border: 3px solid #00ff00;
    border-radius: 15px;
    padding: 10px 25px;
    z-index: 90;
    box-shadow: 0 0 30px rgba(0, 255, 0, 0.6);
    animation: levelPulse 1.5s ease-in-out infinite;
    position: relative;
}

@keyframes levelPulse {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.05); }
}

.level-title {
    font-size: 18px;
    font-weight: 900;
    text-align: center;
    color: #00ff00;
    text-shadow: 0 0 15px #00ff00;
    margin-bottom: 5px;
}

.level-bar {
    width: 200px;
    height: 10px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid rgba(0, 255, 0, 0.5);
}

.level-progress {
    height: 100%;
    background: linear-gradient(90deg, #00ff00, #00ffff);
    width: 0%;
    transition: width 0.3s ease-out;
    box-shadow: 0 0 10px #00ff00;
}

.achievement-popup {
    position: fixed;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    padding: 20px 40px;
    border-radius: 20px;
    border: 4px solid #fff;
    box-shadow: 0 10px 50px rgba(255, 215, 0, 0.8);
    z-index: 300;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 18px;
    font-weight: 900;
    transition: top 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.achievement-popup.show {
    top: 100px;
}

.achievement-icon {
    font-size: 3rem;
    animation: achievementSpin 1s ease-in-out infinite;
}

@keyframes achievementSpin {
    0%, 100% { transform: rotate(-10deg) scale(1); }
    50% { transform: rotate(10deg) scale(1.2); }
}

.video-controls {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 5px;
    z-index: 95;
}

.video-btn {
    background: rgba(45, 38, 49, 0.9);
    border: 2px solid #ec4899;
    color: white;
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    transition: all 0.2s;
}

.video-btn:hover {
    background: #ec4899;
    transform: scale(1.05);
}

.top-players {
    position: fixed;
    right: 20px;
    top: 80px;
    width: 250px;
    background: rgba(45, 38, 49, 0.95);
    backdrop-filter: blur(15px);
    border: 3px solid #ffd700;
    border-radius: 15px;
    padding: 15px;
    z-index: 95;
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.6);
    animation: topPulse 2s ease-in-out infinite;
}

@keyframes topPulse {
    0%, 100% { box-shadow: 0 0 40px rgba(255, 215, 0, 0.6); }
    50% { box-shadow: 0 0 60px rgba(255, 215, 0, 0.9); }
}

@media (max-width: 768px) {
    .top-players, .video-controls {
        display: none;
    }
}

.top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 900;
    color: #ffd700;
    text-shadow: 0 0 15px #ffd700;
    margin-bottom: 12px;
    animation: rainbow 2s linear infinite;
}

.close-btn, .close-btn-small {
    background: rgba(255, 0, 0, 0.5);
    border: 1px solid #ff0000;
    color: white;
    width: 25px;
    height: 25px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 900;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.close-btn-small {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    font-size: 12px;
    z-index: 10;
}

.close-btn:hover, .close-btn-small:hover {
    background: #ff0000;
    transform: scale(1.1);
}

.close-btn:active, .close-btn-small:active {
    transform: scale(0.95);
}

/* HELL MODE STYLES */
@keyframes hellRotate {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-2deg); }
    75% { transform: rotate(2deg); }
}

@keyframes hellFade {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@keyframes hellShake {
    0%, 100% { transform: translate(0, 0); }
    10%, 30%, 50%, 70%, 90% { transform: translate(-2px, 2px); }
    20%, 40%, 60%, 80% { transform: translate(2px, -2px); }
}

#board.hell-rotating .card {
    animation: hellRotate 3s ease-in-out infinite !important;
}

#board.hell-fading .card {
    animation: hellFade 4s ease-in-out infinite !important;
}

.app-container.hell-shake {
    animation: hellShake 0.5s ease-in-out infinite !important;
}

.top-player {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin: 5px 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    font-size: 13px;
    transition: all 0.2s;
}

.top-player:hover {
    transform: translateX(3px);
    background: rgba(236, 72, 153, 0.2);
}

.top-player.you {
    border: 2px solid #00ff00;
    background: rgba(0, 255, 0, 0.1);
    font-weight: 900;
}

.top-rank {
    font-size: 18px;
    font-weight: 900;
}

.top-name {
    flex-grow: 1;
    font-size: 12px;
}

.top-score {
    color: #ffd700;
    font-weight: 900;
}

@keyframes fadeScaleIn {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes fadeScaleOut {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to { opacity: 0; transform: scale(1.05) translateY(-20px); }
}

.overlay.show { display: flex; animation: fadeScaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.overlay.hide { display: flex; animation: fadeScaleOut 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

@keyframes toastFly {
    0% { opacity: 0; transform: translate(-50%, 0) scale(0.5); }
    20% { opacity: 1; transform: translate(-50%, -100px) scale(1.2); }
    100% { opacity: 0; transform: translate(-50%, -250px) scale(1); }
}

.bad-shuffle-toast {
    position: fixed; left: 50%; bottom: 80px;
    color: #ff4d4d; font-weight: 900; font-size: 1.5rem;
    text-transform: uppercase; pointer-events: none; z-index: 1000;
    animation: toastFly 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    text-shadow: 0 0 15px rgba(255,0,0,0.5);
}

.btn-action {
    background-color: #a34e78; border-radius: 20px;
    padding: 12px 0; width: 48%; font-weight: bold; text-align: center;
    box-shadow: 0 4px 0 #7a3a5a;
    transition: all 0.2s;
    user-select: none;
    flex-shrink: 0;
    z-index: 60;
    pointer-events: auto;
}
.btn-action:active { transform: translateY(2px); box-shadow: 0 2px 0 #7a3a5a; }
.btn-action.locked { background-color: #4a3f50; box-shadow: 0 4px 0 #2d2631; color: #a34e78; }

.shape-svg-classic { width: 95%; height: 50px; flex-shrink: 0; }
.shape-svg-classic.oval { margin-top: -13.2px; }
.shape-svg-classic.diamond { margin-top: -14.9px; }
.shape-svg-classic.wave { height: 56px; margin-top: -21px; transform: translateY(3px); }
.shape-svg-classic:first-child { margin-top: 0 !important; }

#board.rotated .shape-svg-classic { 
    width: 50px; 
    height: 95%; 
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}
#board.rotated .shape-svg-classic.oval { 
    margin-left: -13.2px;
}
#board.rotated .shape-svg-classic.diamond { 
    margin-left: -14.9px;
}
#board.rotated .shape-svg-classic.wave { 
    width: 56px; 
    margin-left: -21px;
    transform: translateX(-3px);
}
#board.rotated .shape-svg-classic:first-child { 
    margin-left: 0 !important;
}

#board.rotated .card svg:not(.shape-svg-classic) {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.overlay { 
    display: none; position: absolute; inset: 0; 
    background: rgba(45, 38, 49, 0.98); backdrop-filter: blur(15px);
    z-index: 100; flex-direction: column; align-items: center; justify-content: center;
    padding: 20px;
}

.settings-btn {
    background: #443a4a; width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 5px; cursor: pointer;
    z-index: 90;
}

.settings-row {
    width: 100%; max-width: 320px; background: #3d3442; 
    padding: 12px; border-radius: 15px; margin-bottom: 8px;
    display: flex; justify-content: space-between; align-items: center;
    border: 1px solid #5a4d61;
}

.toggle-switch {
    position: relative; width: 50px; height: 26px;
    background: #2d2631; border-radius: 13px; transition: 0.3s;
    cursor: pointer; border: 2px solid #5a4d61;
}
.toggle-switch.active { background: #a34e78; border-color: #a34e78; }
.toggle-switch::after {
    content: ''; position: absolute; width: 18px; height: 18px;
    background: white; border-radius: 50%; top: 2px; left: 2px;
    transition: 0.2s cubic-bezier(0.18, 0.89, 0.35, 1.15);
}
.toggle-switch.active::after { left: 26px; }

.preset-chip {
    padding: 6px 12px; border-radius: 10px; background: #2d2631;
    font-size: 12px; font-weight: bold; color: #888; border: 1px solid #5a4d61;
    cursor: pointer; transition: all 0.2s; user-select: none;
}
.preset-chip.active { background: #a34e78; color: white; border-color: #a34e78; }
.preset-chip:active { transform: scale(0.95); }

@keyframes chipPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
.chip-animate { animation: chipPulse 0.25s ease-out; }

.records-list {
    width: 100%; max-width: 350px; height: 320px;
    overflow-y: auto; 
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
    padding-right: 5px;
    scrollbar-gutter: stable;
}
.record-item {
    background: #3d3442; border-radius: 12px; padding: 10px 15px;
    margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between;
    border: 1px solid #5a4d61; cursor: pointer;
}
.record-item:active { background: #4a3f50; }
.record-info { font-size: 0.85rem; color: #ccc; pointer-events: none; }
.record-val { font-weight: bold; color: #ec4899; font-size: 1.1rem; }
.btn-del { color: #ff4d4d; padding: 10px; opacity: 0.6; cursor: pointer; z-index: 10; }
.btn-del:active { opacity: 1; transform: scale(1.1); }
.records-list::-webkit-scrollbar { width: 4px; }
.records-list::-webkit-scrollbar-thumb { background: #a34e78; border-radius: 10px; }

.input-mini {
    background: #2d2631; border: 1px solid #5a4d61; border-radius: 8px;
    width: 50px; text-align: center; color: white; font-weight: bold; padding: 4px 0;
    font-family: inherit; outline: none;
}

.det-panel {
    background: #3d3442; border: 1px solid #5a4d61;
    border-radius: 6px; width: 32px; height: 42px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
}
.det-label { font-size: 7px; text-transform: uppercase; color: #888; margin-top: 1px; }
.det-val { font-weight: 900; font-size: 14px; line-height: 1; color: #ec4899; }

.bottom-actions {
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: relative;
    z-index: 60;
}

.seed-indicator {
    font-size: 10px; color: #a34e78; font-weight: bold;
    text-transform: uppercase; margin-top: 2px;
}

.stat-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    width: 100%; max-width: 350px;
}
.stat-card {
    background: rgba(255,255,255,0.05); 
    padding: 10px 14px; 
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 64px;
}
.stat-label { font-size: 9px; color: #9ca3af; text-transform: uppercase; font-weight: 700; letter-spacing: 0.05em; margin-bottom: 5px; display: block; line-height: 1; }
.stat-value { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-weight: 700; line-height: 1; }
.stat-value.large { font-size: 26px; color: #ec4899; }
.stat-value.medium { font-size: 22px; color: white; }
.stat-value.small-mono { font-size: 13px; color: white; line-height: 1.1; }

.chart-container {
    width: 100%;
    max-width: 350px;
    height: 140px;
    margin-top: 10px;
    background: rgba(0,0,0,0.2);
    border-radius: 12px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,0.05);
}

.modifiers-container {
    width: 100%; max-width: 350px;
    background: rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 6px; margin-bottom: 6px;
    display: flex; flex-wrap: wrap; gap: 4px;
    justify-content: center;
    min-height: 32px;
}
.mod-chip {
    background: #443a4a; color: #ec4899;
    font-size: 9px; font-weight: 900;
    padding: 2px 6px; border-radius: 4px;
    border: 1px solid #a34e78;
    text-transform: uppercase;
}
.mod-none { font-size: 9px; color: #555; text-transform: uppercase; font-weight: bold; margin: auto; }

#swipe-zone {
    position: absolute; 
    top: 100px;
    bottom: 150px;
    left: 10px; 
    right: 55px;
    z-index: 35;
    touch-action: none;
    background: transparent;
    pointer-events: none;
}

.share-btn {
    background: #4b5563; border-radius: 12px;
    width: 44px; height: 50px; display: flex; align-items: center; justify-content: center;
    color: white; box-shadow: 0 4px 0 #374151; transition: all 0.2s;
}
.share-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #374151; }

.more-details-btn {
    background: #3d3442; border-radius: 10px;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    color: #ec4899; position: absolute; right: 10px; top: 10px;
    cursor: pointer;
}

.extra-stats-modal {
    background: #3d3442; border: 1px solid #5a4d61; border-radius: 15px;
    padding: 20px; width: 100%; max-width: 320px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.extra-stat-row {
    display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 8px 0; font-size: 0.8rem;
}
.extra-stat-row:last-child { border-bottom: none; }
.extra-stat-label { color: #9ca3af; text-transform: uppercase; font-weight: bold; }
.extra-stat-value { color: white; font-family: monospace; }

.export-only { display: none; }

.kb-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%;
}
.kb-cell {
    background: #2d2631; border: 1px solid #5a4d61; border-radius: 8px;
    min-height: 45px; display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 0.875rem; color: #ec4899; text-transform: uppercase; cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    padding: 4px 8px; text-align: center;
}
.kb-cell:active { background: #a34e78; color: white; }
.kb-cell.waiting { animation: pulse 0.6s infinite; background: #ec4899; color: white; border-color: white; }

@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

@keyframes conflictPulse {
    0% { background: #2d2631; border-color: #5a4d61; }
    50% { background: #ef4444; border-color: white; }
    100% { background: #2d2631; border-color: #5a4d61; }
}
.kb-conflict { animation: conflictPulse 0.4s ease-out; }

@media (pointer: coarse) {
    .desktop-only { display: none !important; }
    
    #board.rotated .shape-svg-classic { 
        width: 44px; 
        height: 90%; 
    }
    #board.rotated .shape-svg-classic.oval { 
        margin-left: -12px;
    }
    #board.rotated .shape-svg-classic.diamond { 
        margin-left: -13px;
    }
    #board.rotated .shape-svg-classic.wave { 
        width: 49px; 
        margin-left: -18px;
        transform: translateX(-3px);
    }
    
    #board.rotated .card svg:not(.shape-svg-classic) {
        width: 27px;
        height: 27px;
    }
}

.resizer {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: ew-resize;
    background: transparent;
    z-index: 50;
}
.resizer-l { left: 0; }
.resizer-r { right: 0; }

input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
}
input[type=range]:focus { outline: none; }
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: #2d2631;
    border-radius: 3px;
    border: 1px solid #5a4d61;
}
input[type=range]::-webkit-slider-thumb {
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: #ec4899;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -7px;
    box-shadow: 0 0 10px rgba(236, 72, 153, 0.3);
}
input[type=range]::-moz-range-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: #2d2631;
    border-radius: 3px;
    border: 1px solid #5a4d61;
}
input[type=range]::-moz-range-thumb {
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: #ec4899;
    cursor: pointer;
    border: none;
}