/* Thanks to @donpark on GitHub Scalable CSS Playing Cards */
        @font-face {
          font-family: 'Suit-Regular';
          src: url("https://dinhdanh.com/uploads/fonts/suit-regular.eot");
          src: url("https://dinhdanh.com/uploads/fonts/suit-regular.eot?#iefix") format('embedded-opentype'), url("https://dinhdanh.com/uploads/fonts/suit-regular.woff") format('woff'), url("https://dinhdanh.com/uploads/fonts/suit-regular.ttf") format('truetype'), url("https://dinhdanh.com/uploads/fonts/suit-regular.svg#suit-regular") format('svg');
          font-weight: normal;
          font-style: normal;
        }

        html, body {
           width: 100%;
           height: 100%;
           margin: 0;
           padding: 0;
           font-family: 'Arial', sans-serif;
        }

        /* Header Styles */
        .header {
            background: linear-gradient(135deg, #0e8b44, #1a5f2f);
            color: white;
            padding: 15px 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
            position: relative;
            z-index: 1000;
        }

        .header .container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }

        .header h1 {
            margin: 0;
            font-size: 24px;
            font-weight: bold;
        }

        .app-store-btn {
            background: rgba(255,255,255,0.2);
            color: white;
            text-decoration: none;
            padding: 10px 20px;
            border-radius: 25px;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
            border: 2px solid rgba(255,255,255,0.3);
        }

        .app-store-btn:hover {
            background: rgba(255,255,255,0.3);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .app-store-btn i {
            font-size: 16px;
        }

        /* Main Content */
        .main-content {
            min-height: 100vh;
            background: #0e8b44 url('https://dinhdanh.com/uploads/images/green_felt.jpg');
            background-size: cover;
            background-position: center;
            position: relative;
        }

        .game-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            color: #f3f5f7;
        }

        /* Footer Styles */
        .footer {
            background: linear-gradient(135deg, #1a5f2f, #0e8b44);
            color: white;
            text-align: center;
            padding: 15px 0;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
        }

        .footer p {
            margin: 0;
            font-size: 14px;
        }

        /* Invalid Move Notification */
        .invalid-move-notification {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: linear-gradient(135deg, #ff4757, #ff3742);
            color: white;
            padding: 20px 30px;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            z-index: 9999;
            display: none;
            text-align: center;
            min-width: 300px;
            animation: shake 0.5s ease-in-out;
        }

        @keyframes shake {
            0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
            25% { transform: translate(-50%, -50%) rotate(-1deg); }
            75% { transform: translate(-50%, -50%) rotate(1deg); }
        }

        .invalid-move-notification h3 {
            margin: 0 0 10px 0;
            font-size: 18px;
        }

        .invalid-move-notification p {
            margin: 0;
            font-size: 14px;
            line-height: 1.4;
        }

        /* Game Instructions Styles */
        .game-instructions {
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
            padding: 40px 0;
            margin-top: 30px;
        }

        .instructions-container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .instructions-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .instructions-header h2 {
            color: #2c3e50;
            font-size: 32px;
            margin-bottom: 10px;
        }

        .instructions-header p {
            color: #7f8c8d;
            font-size: 18px;
            font-style: italic;
        }

        .instruction-section {
            background: white;
            padding: 30px;
            margin-bottom: 25px;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            border-left: 5px solid #0e8b44;
        }

        .instruction-section h3 {
            color: #2c3e50;
            font-size: 24px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .instruction-section p {
            color: #34495e;
            line-height: 1.6;
            margin-bottom: 15px;
        }

        .instruction-section ul {
            color: #34495e;
            line-height: 1.8;
            padding-left: 20px;
        }

        .instruction-section li {
            margin-bottom: 8px;
        }

        .tips-section {
            background: linear-gradient(135deg, #74b9ff, #0984e3);
            color: white;
        }

        .tips-section h3 {
            color: white;
        }

        .tips-section p, .tips-section li {
            color: rgba(255,255,255,0.95);
        }

        .template {
           display: none;
        }

        #score {
           position: relative;
           background: rgba(0,0,0,.15);
           margin-top: 1.5em;
           margin-bottom: 0.5em;
           padding: 1em;
           line-height: 1;
           border-radius: 10px;
        }

        #score > * {
           display: inline-block;
           min-width: 100px;
        }

        #score > *:last-child {
           float: right;
           text-align: right;
        }

        #score label {
           margin-bottom: 0;
        }

        #score .timer button {
           display: none;
           position: absolute;
           -webkit-appearance: none;
           background: transparent;
           outline: none;
           border: 0;
           padding: 0;
           top: 0;
           left: 0;
           width: 3em;
           height: 100%;
        }

        #score .timer button i {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           font-size: 0;
        }

        #score .timer button i::before {
           position: absolute;
           top: 50%;
           left: 50%;
           width: 0.75em;
           height: 1em;
           margin-left: -0.375em;
           margin-top: -0.5em;
           font-size: 1.5rem;
           content: none;
        }

        #score .timer button i#play::before {
           border-top: 8px solid transparent;
           border-left: 12px solid #fff;
           border-bottom: 8px solid transparent;
        }

        #score .timer button i#pause::before {
           border-right: 4px solid #fff;
           border-left: 4px solid #fff;
        }

        [data-gameplay="active"] #score .timer button,
        [data-gameplay="paused"] #score .timer button {
           display: inline-block;
        }

        [data-gameplay="active"] #score .timer button i#pause::before,
        [data-gameplay="paused"] #score .timer button i#play::before {
           content: '';
        }

        [data-gameplay="active"] #score,
        [data-gameplay="paused"] #score {
           padding-left: 3em;
        }

        #auto-win {
           display: none;
           -webkit-appearance: none;
           outline: none;
           border: 0;
           position: absolute;
           z-index: 1;
           bottom: 0;
           width: 100%;
           background: rgba(0,0,0,.8);
           padding: 1em;
           line-height: 1;
           color: white;
        }

        #table {
           opacity: 0;
           width: 100%;
           padding: 15px 0;
        }

        #table > div {
           position: relative;
           margin-bottom: 10px;
        }

        #table > div:last-child {
           margin-bottom: 0;
        }

        #table > div::after {
           content: '';
           display: table-cell;
           clear: both;
        }

        #table ul {
           display: inline-block;
           padding: 0;
           margin: 0;
           list-style: none;
        }

        #table > div > ul {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
        }

        .pile {
           display: block;
           position: relative;
           float: left;
           width: 13%;
           margin-right: 1.5%;
           margin-bottom: 10px;
           padding: 5px;
        }

        .pile:last-child {
           margin-right: 0;
        }

        .pile::after {
           content: '';
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           border: 2px dotted rgba(0,0,0,.25);
           border-radius: 5px;
        }

        .card {
           display: block;
           position: absolute;
           top: 0;
           left: 0;
           background-color: #ddd;
           background-image: url('https://dinhdanh.com/uploads/images/card_back_bg.png');
           background-size: contain;
           background-repeat: no-repeat;
           width: 100%;
           height: 100%;
           font-family: 'Suit-Regular', sans-serif;
           font-size: 0.6vw;
           border-radius: 5px;
           z-index: -1;
        }

        .card * {
           pointer-events: none;
        }

        @media screen and (min-width: 768px) {
           .card {
              font-size: 0.325em;
           }
           .pile::after, .card {
              border-radius: 10px;
           }
        }

        @media screen and (min-width: 992px) {
           .card {
              font-size: 0.425em;
           }
        }

        @media screen and (min-width: 1200px) {
           .card {
              font-size: 0.525em;
           }
        }

        .card > div {
           display: none;
        }

        .card.up {
           background-image: url('https://dinhdanh.com/uploads/images/card_face_bg.png');
           background-repeat: repeat;
           color: #111;
        }

        .card.up > div {
           display: block;
        }

        .card::before {
           content: '';
           display: block;
           position: absolute;
           width: 100%;
           height: 100%;
           border-radius: 5px;
        }

        .card[data-selected="true"]::before {
           box-shadow: 0 0 6px 3px #FCDB1A;
        }

        @media screen and (min-width: 768px) {
           .card::before {
              border-radius: 10px;
           }
        }

        .card .suit {
           font-size: 4.8em;
           font-weight: normal;
           width: 0.6896551724137931em;
           height: 0.786206896551724em;
           line-height: 0.786206896551724em;
           position: absolute;
           text-align: center;
        }

        @media screen and (max-width: 767px) {
           .card > div > .suit {
              display: none;
           }
        }

        .card .heart,
        .card .diamond {
           color: #cc0000;
        }

        .card .spade .suit::before { content: '♠' }
        .card .heart .suit::before { content: '♥' }
        .card .diamond .suit::before { content: '♦' }
        .card .club .suit::before { content: '♣' }

        .card .corner {
           line-height: 1;
           position: absolute;
           text-align: center;
        }

        .card .corner span {
           display: block;
           font-size: 9em;
           font-weight: bold;
           width: 1.1em;
           text-align: center;
           overflow: hidden;
        }

        @media screen and (min-width: 768px) {
           .card .corner span {
              font-size: 3em;
              width: 1.3em;
           }
        }

        .card .corner .suit {
           margin-top: 0;
           margin-left: 0;
        }

        .card .corner.top {
           left: 0.64em;
           top: 0.96em;
        }

        .card .corner.bottom {
           bottom: 0.96em;
           right: 0.64em;
           -ms-transform: rotate(180deg);
           -moz-transform: rotate(180deg);
           -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
        }

        .card .ace span.suit.middle_center {
           font-size: 10.24em;
           left: 50%;
           top: 50%;
           margin-top: -0.5em;
           margin-left: -0.35em;
        }

        .card .face::before {
           display: none;
           content: '';
           position: absolute;
           top: 15.25%;
           left: 19%;
           width: 62%;
           height: 70.5%;
           background-repeat: no-repeat;
           background-size: contain;
        }

        @media screen and (min-width: 768px) {
           .card .face::before {
              display: block;
           }
        }

        .card .spade.king .face::before {
           background-image: url('https://dinhdanh.com/uploads/images/face-king-spade.png');
        }

        .card .spade.queen .face::before {
           background-image: url('https://dinhdanh.com/uploads/images/face-queen-spade.png');
        }

        .card .spade.jack .face::before {
           background-image: url('https://dinhdanh.com/uploads/images/face-jack-spade.png');
        }

        .card .heart.king .face::before {
           background-image: url('https://dinhdanh.com/uploads/images/face-king-heart.png');
        }

        .card .heart.queen .face::before {
           background-image: url('https://dinhdanh.com/uploads/images/face-queen-heart.png');
        }

        .card .heart.jack .face::before {
           background-image: url('https://dinhdanh.com/uploads/images/face-jack-heart.png');
        }

        .card .diamond.king .face::before {
           background-image: url('https://dinhdanh.com/uploads/images/face-king-diamond.png');
        }

        .card .diamond.queen .face::before {
           background-image: url('https://dinhdanh.com/uploads/images/face-queen-diamond.png');
        }

        .card .diamond.jack .face::before {
           background-image: url('https://dinhdanh.com/uploads/images/face-jack-diamond.png');
        }

        .card .club.king .face::before {
           background-image: url('https://dinhdanh.com/uploads/images/face-king-club.png');
        }

        .card .club.queen .face::before {
           background-image: url('https://dinhdanh.com/uploads/images/face-queen-club.png');
        }

        .card .club.jack .face::before {
           background-image: url('https://dinhdanh.com/uploads/images/face-jack-club.png');
        }

        .card .suit.top_center {
           left: 50%;
           top: 0;
           margin-left: -0.35em;
           margin-top: 0.65em;
        }

        .card .suit.top_left {
           left: 0;
           top: 0;
           margin-left: 0.75em;
           margin-top: 0.65em;
        }

        .card .suit.top_right {
           right: 0;
           top: 0;
           margin-right: 0.75em;
           margin-top: 0.65em;
        }

        .card .suit.middle_center {
           left: 50%;
           top: 50%;
           margin-left: -0.35em;
           margin-top: -0.5em;
        }

        .card .suit.middle_top {
           left: 50%;
           top: 0;
           margin-left: -0.35em;
           margin-top: 1.25em;
        }

        .card .suit.middle_bottom {
           bottom: 0;
           left: 50%;
           margin-bottom: 0.65em;
           margin-left: -0.35em;
           -ms-transform: rotate(180deg);
           -moz-transform: rotate(180deg);
           -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
        }

        .card .suit.middle_left {
           left: 0;
           top: 50%;
           margin-left: 0.75em;
           margin-top: -0.5em;
        }

        .card .suit.middle_right {
           right: 0;
           top: 50%;
           margin-right: 0.75em;
           margin-top: -0.5em;
        }

        .card .suit.middle_top_center {
           left: 50%;
           top: 50%;
           margin-left: -0.35em;
           margin-top: -1.35em;
        }

        .card .suit.middle_top_left {
           left: 0;
           top: 50%;
           margin-left: 0.65em;
           margin-top: -1em;
        }

        .card .suit.middle_top_right {
           right: 0;
           top: 50%;
           margin-right: 0.65em;
           margin-top: -1em;
        }

        .card .suit.middle_bottom_left {
           bottom: 50%;
           left: 0;
           margin-left: 0.65em;
           margin-bottom: -1em;
           -ms-transform: rotate(180deg);
           -moz-transform: rotate(180deg);
           -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
        }

        .card .suit.middle_bottom_right {
           bottom: 50%;
           right: 0;
           margin-bottom: -1em;
           margin-right: 0.65em;
           -ms-transform: rotate(180deg);
           -moz-transform: rotate(180deg);
           -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
        }

        .card .suit.middle_bottom_center {
           bottom: 50%;
           left: 50%;
           margin-bottom: -1.35em;
           margin-left: -0.35em;
           -ms-transform: rotate(180deg);
           -moz-transform: rotate(180deg);
           -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
        }

        .card .suit.bottom_center {
           bottom: 0;
           left: 50%;
           margin-bottom: 0.65em;
           margin-left: -0.35em;
           -ms-transform: rotate(180deg);
           -moz-transform: rotate(180deg);
           -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
        }

        .card .suit.bottom_left {
           bottom: 0;
           left: 0;
           margin-bottom: 0.65em;
           margin-left: 0.75em;
           -ms-transform: rotate(180deg);
           -moz-transform: rotate(180deg);
           -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
        }

        .card .suit.bottom_right {
           bottom: 0;
           right: 0;
           margin-bottom: 0.65em;
           margin-right: 0.75em;
           -ms-transform: rotate(180deg);
           -moz-transform: rotate(180deg);
           -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
        }

        .card:nth-child(1),
        .card:nth-child(2),
        .card:nth-child(3),
        .card:nth-child(4),
        .card:nth-child(5) {
           box-shadow: 0 0 5px rgba(0,0,0,.25), 0 2px 1px rgba(0,0,0,.5);
           z-index: 1;
        }

        .card:nth-child(1) { top: 0; z-index: 5; }
        .card:nth-child(2) { top: 2px; z-index: 4; }
        .card:nth-child(3) { top: 4px; z-index: 3; }
        .card:nth-child(4) { top: 6px; z-index: 2; }
        .card:nth-child(5) { top: 8px; z-index: 1; }

        /* stock */
        .stock {
           z-index: 1;
        }

        .stock .reload-icon {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           font-size: 3vw;
           font-weight: bold;
           line-height: 1;
           opacity: 0.25;
           z-index: 1;
        }

        @media screen and (max-width: 767px) {
           .stock .reload-icon {
              font-size: 5vw;
           }
        }

        .stock .reload-icon span {
           display: block;
           position: absolute;
           top: 50%;
           left: 0;
           width: 100%;
           text-align: center;
           padding: 0.25em;
           margin-top: -0.75em;
           pointer-events: none;
        }

        .stock .reload-icon span::before,
        .stock .reload-icon span::after {
           content: '';
           display: inline-block;
           border-style: solid;
        }

        .stock .reload-icon span::before {
           width: 1.25em;
           height: 1.25em;
           border-color: transparent black black black;
           border-radius: 50%;
           border-width: .125em;
           -webkit-transform: rotate(45deg);
           transform: rotate(45deg);
        }

        .stock .reload-icon span::after {
           position: absolute;
           top: 0;
           left: 50%;
           width: 0;
           height: 0;
           border-color: transparent transparent transparent black;
           border-width: .3125em 0 .3125em .5em;
        }

        /* waste */
        .waste {
           z-index: 1;
        }

        /* foundation */
        .fnd .pile {
           left: 43.5%;
        }

        .fnd .pile::before {
           content: '';
           position: absolute;
           top: 50%;
           left: 0;
           width: 100%;
           color: #000;
           font-family: 'Suit-Regular', sans-serif;
           font-size: 10vw;
           margin-top: -0.6em;
           line-height: 1;
           text-align: center;
           opacity: 0.25;
        }

        @media screen and (min-width: 768px) {
           .fnd .pile::before {
              font-size: 6em;
           }
        }

        @media screen and (min-width: 992px) {
           .fnd .pile::before {
              font-size: 7em;
           }
        }

        @media screen and (min-width: 1200px) {
           .fnd .pile::before {
              font-size: 8em;
           }
        }

        .fnd .pile.spades::before { content: '♠' }
        .fnd .pile.hearts::before { content: '♥' }
        .fnd .pile.diamonds::before { content: '♦' }
        .fnd .pile.clubs::before { content: '♣' }

        /* tableau */
        .tab .card {
           box-shadow: 0 0 5px rgba(0,0,0,.5);
           z-index: 1;
           margin-bottom: 10em;
        }

        /* face up */
        .tab .card:nth-child(2) { top: 6em; left: 0; }
        .tab .card:nth-child(3) { top: 12em; left: 0; }
        .tab .card:nth-child(4) { top: 18em; left: 0; }
        .tab .card:nth-child(5) { top: 24em; left: 0; }
        .tab .card:nth-child(6) { top: 30em; left: 0; }
        .tab .card:nth-child(7) { top: 36em;  left: 0; }
        .tab .card:nth-child(8) { top: 42em;  left: 0; }
        .tab .card:nth-child(9) { top: 48em;  left: 0; }
        .tab .card:nth-child(10) { top: 54em;  left: 0; }
        .tab .card:nth-child(11) { top: 60em;  left: 0; }
        .tab .card:nth-child(12) { top: 66em;  left: 0; }
        .tab .card:nth-child(13) { top: 72em;  left: 0; }
        .tab .card:nth-child(14) { top: 78em;  left: 0; }
        .tab .card:nth-child(15) { top: 84em;  left: 0; }
        .tab .card:nth-child(16) { top: 90em;  left: 0; }
        .tab .card:nth-child(17) { top: 96em;  left: 0; }
        .tab .card:nth-child(18) { top: 102em;  left: 0; }
        .tab .card:nth-child(19) { top: 108em;  left: 0; }
        .tab .card:nth-child(20) { top: 114em;  left: 0; }
        .tab .card:nth-child(21) { top: 120em;  left: 0; }

        /* face down */
        .tab .pile[data-unplayed='1'] .card:nth-child(2),
        .tab .pile[data-unplayed='2'] .card:nth-child(2),
        .tab .pile[data-unplayed='3'] .card:nth-child(2),
        .tab .pile[data-unplayed='4'] .card:nth-child(2),
        .tab .pile[data-unplayed='5'] .card:nth-child(2),
        .tab .pile[data-unplayed='6'] .card:nth-child(2) { top: 3em; }

        .tab .pile[data-unplayed='2'] .card:nth-child(3),
        .tab .pile[data-unplayed='3'] .card:nth-child(3),
        .tab .pile[data-unplayed='4'] .card:nth-child(3),
        .tab .pile[data-unplayed='5'] .card:nth-child(3),
        .tab .pile[data-unplayed='6'] .card:nth-child(3) { top: 6em; }

        .tab .pile[data-unplayed='3'] .card:nth-child(4),
        .tab .pile[data-unplayed='4'] .card:nth-child(4),
        .tab .pile[data-unplayed='5'] .card:nth-child(4),
        .tab .pile[data-unplayed='6'] .card:nth-child(4) { top: 9em; }

        .tab .pile[data-unplayed='4'] .card:nth-child(5),
        .tab .pile[data-unplayed='5'] .card:nth-child(5),
        .tab .pile[data-unplayed='6'] .card:nth-child(5) { top: 12em; }

        .tab .pile[data-unplayed='5'] .card:nth-child(6),
        .tab .pile[data-unplayed='6'] .card:nth-child(6) { top: 15em; }

        .tab .pile[data-unplayed='6'] .card:nth-child(7) { top: 18em; }

        /* piles with odd # of face down cards */
        .tab .pile[data-unplayed='1'] .card:nth-child(3) { top: 9em; left: 0; }
        .tab .pile[data-unplayed='1'] .card:nth-child(4),
        .tab .pile[data-unplayed='3'] .card:nth-child(5) { top: 15em; left: 0; }
        .tab .pile[data-unplayed='1'] .card:nth-child(5),
        .tab .pile[data-unplayed='3'] .card:nth-child(6),
        .tab .pile[data-unplayed='5'] .card:nth-child(7) { top: 21em; left: 0; }
        .tab .pile[data-unplayed='1'] .card:nth-child(6),
        .tab .pile[data-unplayed='3'] .card:nth-child(7),
        .tab .pile[data-unplayed='5'] .card:nth-child(8) { top: 27em; left: 0; }
        .tab .pile[data-unplayed='1'] .card:nth-child(7),
        .tab .pile[data-unplayed='3'] .card:nth-child(8),
        .tab .pile[data-unplayed='5'] .card:nth-child(9) { top: 33em;  left: 0; }
        .tab .pile[data-unplayed='1'] .card:nth-child(8),
        .tab .pile[data-unplayed='3'] .card:nth-child(9),
        .tab .pile[data-unplayed='5'] .card:nth-child(10) { top: 39em;  left: 0; }
        .tab .pile[data-unplayed='1'] .card:nth-child(9),
        .tab .pile[data-unplayed='3'] .card:nth-child(10),
        .tab .pile[data-unplayed='5'] .card:nth-child(11) { top: 45em;  left: 0; }
        .tab .pile[data-unplayed='1'] .card:nth-child(10),
        .tab .pile[data-unplayed='3'] .card:nth-child(11),
        .tab .pile[data-unplayed='5'] .card:nth-child(12) { top: 51em;  left: 0; }
        .tab .pile[data-unplayed='1'] .card:nth-child(11),
        .tab .pile[data-unplayed='3'] .card:nth-child(12),
        .tab .pile[data-unplayed='5'] .card:nth-child(13) { top: 57em;  left: 0; }
        .tab .pile[data-unplayed='1'] .card:nth-child(12),
        .tab .pile[data-unplayed='3'] .card:nth-child(13),
        .tab .pile[data-unplayed='5'] .card:nth-child(14) { top: 63em;  left: 0; }
        .tab .pile[data-unplayed='1'] .card:nth-child(13),
        .tab .pile[data-unplayed='3'] .card:nth-child(14),
        .tab .pile[data-unplayed='5'] .card:nth-child(15) { top: 69em;  left: 0; }
        .tab .pile[data-unplayed='1'] .card:nth-child(14),
        .tab .pile[data-unplayed='3'] .card:nth-child(15),
        .tab .pile[data-unplayed='5'] .card:nth-child(16) { top: 75em;  left: 0; }
        .tab .pile[data-unplayed='1'] .card:nth-child(15),
        .tab .pile[data-unplayed='3'] .card:nth-child(16),
        .tab .pile[data-unplayed='5'] .card:nth-child(17) { top: 81em;  left: 0; }
        .tab .pile[data-unplayed='1'] .card:nth-child(16),
        .tab .pile[data-unplayed='3'] .card:nth-child(17),
        .tab .pile[data-unplayed='5'] .card:nth-child(18) { top: 87em;  left: 0; }
        .tab .pile[data-unplayed='1'] .card:nth-child(17),
        .tab .pile[data-unplayed='3'] .card:nth-child(18),
        .tab .pile[data-unplayed='5'] .card:nth-child(19) { top: 93em;  left: 0; }
        .tab .pile[data-unplayed='1'] .card:nth-child(18),
        .tab .pile[data-unplayed='3'] .card:nth-child(19),
        .tab .pile[data-unplayed='5'] .card:nth-child(20) { top: 99em;  left: 0; }
        .tab .pile[data-unplayed='1'] .card:nth-child(19),
        .tab .pile[data-unplayed='3'] .card:nth-child(20),
        .tab .pile[data-unplayed='5'] .card:nth-child(21) { top: 105em;  left: 0; }
        .tab .pile[data-unplayed='1'] .card:nth-child(20),
        .tab .pile[data-unplayed='3'] .card:nth-child(21) { top: 111em;  left: 0; }
        .tab .pile[data-unplayed='1'] .card:nth-child(21) { top: 117em;  left: 0; }

        /* piles with even # of face down cards */
        .tab .pile[data-unplayed='2'] .card:nth-child(4) { top: 12em; left: 0; }
        .tab .pile[data-unplayed='2'] .card:nth-child(5),
        .tab .pile[data-unplayed='4'] .card:nth-child(6) { top: 18em; left: 0; }
        .tab .pile[data-unplayed='2'] .card:nth-child(6),
        .tab .pile[data-unplayed='4'] .card:nth-child(7),
        .tab .pile[data-unplayed='6'] .card:nth-child(8) { top: 24em; left: 0; }
        .tab .pile[data-unplayed='2'] .card:nth-child(7),
        .tab .pile[data-unplayed='4'] .card:nth-child(8),
        .tab .pile[data-unplayed='6'] .card:nth-child(9) { top: 30em;  left: 0; }
        .tab .pile[data-unplayed='2'] .card:nth-child(8),
        .tab .pile[data-unplayed='4'] .card:nth-child(9),
        .tab .pile[data-unplayed='6'] .card:nth-child(10) { top: 36em;  left: 0; }
        .tab .pile[data-unplayed='2'] .card:nth-child(9),
        .tab .pile[data-unplayed='4'] .card:nth-child(10),
        .tab .pile[data-unplayed='6'] .card:nth-child(11) { top: 42em;  left: 0; }
        .tab .pile[data-unplayed='2'] .card:nth-child(10),
        .tab .pile[data-unplayed='4'] .card:nth-child(11),
        .tab .pile[data-unplayed='6'] .card:nth-child(12) { top: 48em;  left: 0; }
        .tab .pile[data-unplayed='2'] .card:nth-child(11),
        .tab .pile[data-unplayed='4'] .card:nth-child(12),
        .tab .pile[data-unplayed='6'] .card:nth-child(13) { top: 54em;  left: 0; }
        .tab .pile[data-unplayed='2'] .card:nth-child(12),
        .tab .pile[data-unplayed='4'] .card:nth-child(13),
        .tab .pile[data-unplayed='6'] .card:nth-child(14) { top: 60em;  left: 0; }
        .tab .pile[data-unplayed='2'] .card:nth-child(13),
        .tab .pile[data-unplayed='4'] .card:nth-child(14),
        .tab .pile[data-unplayed='6'] .card:nth-child(15) { top: 66em;  left: 0; }
        .tab .pile[data-unplayed='2'] .card:nth-child(14),
        .tab .pile[data-unplayed='4'] .card:nth-child(15),
        .tab .pile[data-unplayed='6'] .card:nth-child(16) { top: 72em;  left: 0; }
        .tab .pile[data-unplayed='2'] .card:nth-child(15),
        .tab .pile[data-unplayed='4'] .card:nth-child(16),
        .tab .pile[data-unplayed='6'] .card:nth-child(17) { top: 78em;  left: 0; }
        .tab .pile[data-unplayed='2'] .card:nth-child(16),
        .tab .pile[data-unplayed='4'] .card:nth-child(17),
        .tab .pile[data-unplayed='6'] .card:nth-child(18) { top: 84em;  left: 0; }
        .tab .pile[data-unplayed='2'] .card:nth-child(17),
        .tab .pile[data-unplayed='4'] .card:nth-child(18),
        .tab .pile[data-unplayed='6'] .card:nth-child(19) { top: 90em;  left: 0; }
        .tab .pile[data-unplayed='2'] .card:nth-child(18),
        .tab .pile[data-unplayed='4'] .card:nth-child(19),
        .tab .pile[data-unplayed='6'] .card:nth-child(20) { top: 96em;  left: 0; }
        .tab .pile[data-unplayed='2'] .card:nth-child(19),
        .tab .pile[data-unplayed='4'] .card:nth-child(20),
        .tab .pile[data-unplayed='6'] .card:nth-child(21) { top: 102em;  left: 0; }
        .tab .pile[data-unplayed='2'] .card:nth-child(20),
        .tab .pile[data-unplayed='4'] .card:nth-child(21) { top: 108em;  left: 0; }
        .tab .pile[data-unplayed='2'] .card:nth-child(21) { top: 114em;  left: 0; }

        /* Confetti */
        #confetti {
           position: absolute;
           top: 0;
           left: 0;
           z-index: 10000;
           pointer-events: none;
           opacity: 0;
        }

        /* Disable Grammarly */
        grammarly-card {
            display: none;
        }

        /* Responsive Design */
        @media screen and (max-width: 768px) {
            .header .container {
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }
            
            .instruction-section {
                padding: 20px;
                margin-bottom: 20px;
            }
            
            .instruction-section h3 {
                font-size: 20px;
            }
            
            .instructions-header h2 {
                font-size: 24px;
            }
        }

/* Game Controls Styles */
.game-controls {
    background: rgba(0,0,0,0.1);
    padding: 15px 0;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.controls-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.control-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.control-group label {
    color: white;
    font-weight: bold;
    margin: 0;
}

#difficultyLevel {
    padding: 8px 12px;
    border: none;
    border-radius: 5px;
    background: white;
    font-size: 14px;
}

.control-btn {
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    background: rgba(255,255,255,0.9);
    color: #0e8b44;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.control-btn:hover {
    background: white;
    transform: translateY(-2px);
}

.control-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Hint highlight */
.hint-card {
    box-shadow: 0 0 15px 5px #FFD700 !important;
    animation: hintPulse 1s ease-in-out infinite;
}

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

/* No moves notification */
.no-moves-notification {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #ff6b6b, #ee5a5a);
    color: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    z-index: 9999;
    display: none;
    text-align: center;
    min-width: 350px;
}

.no-moves-notification h3 {
    margin: 0 0 15px 0;
    font-size: 24px;
}

.no-moves-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

.no-moves-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.no-moves-btn.primary {
    background: white;
    color: #ff6b6b;
}

.no-moves-btn.secondary {
    background: rgba(255,255,255,0.2);
    color: white;
}