#new-game,#undo-move,#hint{text-decoration:none;color:#fff;font-weight:600;background-color:#4caf50;padding:clamp(2px,.3vw,4px)clamp(6px,.8vw,12px);border-radius:6px;border:none;cursor:pointer;text-transform:uppercase;font-size:clamp(11px,.9vw,13px);letter-spacing:.5px;white-space:nowrap;min-width:max-content;height:28px;display:flex;align-items:center;justify-content:center;&:hover { background-color:#45a049; } &:active { transform:translateY(0); }}#hint{background-color:#ff9800;&:hover { background-color:#f57c00; } &:active { background-color:#ef6c00; }}#stats-container{font-size:clamp(11px,.9vw,14px);color:#fff;background:rgba(0,0,0,.2);padding:clamp(2px,.3vw,4px)clamp(6px,.8vw,12px);border-radius:30px;display:flex;gap:clamp(4px,.8vw,12px);align-items:center;flex-wrap:nowrap;height:28px;box-sizing:border-box;white-space:nowrap;overflow:hidden;max-width:100vw}#timer,#score,#moves{font-weight:700;color:#4caf50}.klondike-switch-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:110px;margin-right:10px;&:hover { background:rgba(0,0,0,0.4); border-color:rgba(255,255,255,0.3); } & .switch-track { position:relative; width:100%; height:28px; display:flex; align-items:center; justify-content:space-between; padding:0 4px; } & .switch-option { font-size:clamp(9px,0.8vw,11px); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:rgba(255,255,255,0.6); z-index:2; padding:0 8px; text-align:center; flex:1; &.active { color:white; } } & .switch-slider { position:absolute; top:2px; left:2px; width:48%; height:24px; background:#4caf50; border-radius:16px; z-index:1; } &.mode-3 .switch-slider { transform:translateX(100%); }}.menu-right,#menu,.menu-controls-row{overflow:visible}.icon-button{background:0 0;border:none;cursor:pointer;font-size:1.2rem;padding:5px;margin-right:10px;&:hover { opacity:0.8; }}.other-card-games-link{color:#4caf50;text-decoration:none;font-size:18px;font-weight:600;padding:8px 12px;border-radius:6px;margin-right:15px;white-space:nowrap;&:hover { background:rgba(76,175,80,0.1); }}#game-board{width:70vw;height:100vh;background:linear-gradient(145deg,#1e502f,#234a2f);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.2);padding:20px;box-sizing:border-box;position:relative;display:flex;flex-direction:column;--pile-count:var(--pile-count, 7);--grid-width:calc(70vw - 40px);--card-spacing:clamp(8px, calc(var(--grid-width) * 0.015), 15px);--card-width:calc(
    (var(--grid-width) - (var(--pile-count) - 1) * var(--card-spacing)) /
      var(--pile-count)
  );--card-height:calc(var(--card-width) * 1.4);--tableau-offset-face-up:calc(var(--card-width) * 0.21);--tableau-offset-face-down:calc(var(--card-width) * 0.08);gap:calc(var(--card-spacing));contain:layout style;will-change:transform}.top-row{display:flex;justify-content:space-between;height:var(--card-height,120px);position:relative}.left-piles,.right-piles{display:flex;gap:var(--card-spacing,15px)}.foundation-container{display:flex;gap:var(--card-spacing,15px)}.tableau{height:auto}.tableau-container{display:flex;gap:var(--card-spacing,15px);align-items:flex-start;min-height:var(--card-height);contain:layout;position:relative}.pile{position:relative;min-height:var(--card-height);width:var(--card-width);border-radius:8px;&.can-drop .pile-background { opacity: 1 !important; box-shadow: 0 0 40px rgba(76, 175, 80, 0.8); } &.hint-target .pile-background { opacity: 1 !important; box-shadow: 0 0 60px 10px rgba(255, 193, 7, 0.95); outline: 3px solid rgba(255, 193, 7, 1); }}.tableau-pile{min-height:var(--card-height);flex:1;min-width:var(--card-width);contain:layout style;display:flex;flex-direction:column;align-items:flex-start;position:relative;&.can-drop::after { content: ""; position: absolute; top: 0; left: 0; width: var(--card-width); height: 100%; pointer-events: none; z-index: 0; box-shadow: 0 0 40px rgba(76, 175, 80, 0.8); } &.hint-target::after { content: ""; position: absolute; top: 0; left: 0; width: var(--card-width); height: 100%; pointer-events: none; z-index: 0; box-shadow: 0 0 70px 14px rgba(255, 193, 7, 0.95); } .card { position: relative; left: 0; top: 0; margin-top: 0; } .card.face-up + .card { margin-top: calc(-1 * (var(--card-height) - var(--tableau-offset-face-up))); } .card.face-down + .card { margin-top: calc( -1 * (var(--card-height) - var(--tableau-offset-face-down)) ); }}.pile-background{position:absolute;top:0;left:0;width:var(--card-width);height:var(--card-height);border:.5px dashed rgba(255,255,255,.3);border-radius:8px;background:rgba(224,224,224,.2);pointer-events:none}.pile:has(.card:not(.dragging)).pile-background{opacity:0}.waste-pile .pile-background{opacity:0}.tableau-bg{height:var(--card-height)}.card{position:absolute;width:var(--card-width);height:var(--card-height);border-radius:8px;cursor:pointer;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;will-change:transform;z-index:1;&.flipping { animation: cardFlip 0.3s ease-in-out; } &.stock-to-waste { animation: stockToWasteAnimation 0.3s ease-out forwards; } &.winning { animation: winBounce 0.6s ease-in-out; } &.hint-card { animation: hintPulse 1.3s ease-in-out 0s 3; box-shadow: 0 0 28px 8px rgba(255, 193, 7, 1); z-index: 3; }}.is-dragging{.top-row:has(.card.dragging), .tableau-container:has(.card.dragging) { z-index: 10; } .pile:has(.card.dragging) { z-index: 100; }}.stock-pile{&.empty::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(var(--card-width) * 0.6); height: calc(var(--card-width) * 0.6); border: 8px solid #45a049; border-radius: 50%; opacity: 0.7; }}@keyframes cardFlip{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)}100%{transform:rotateY(0)}}@keyframes stockToWasteAnimation{0%{transform:translateX(0)rotateY(0);z-index:100}50%{transform:translateX(calc(var(--card-width)/2 + var(--card-spacing)/2))rotateY(90deg)}100%{transform:translateX(calc(var(--card-width) + var(--card-spacing)))rotateY(0);z-index:1}}@keyframes winBounce{0%,100%{transform:scale(1)}25%{transform:scale(1.1)rotate(5deg)}75%{transform:scale(1.1)rotate(-5deg)}}@keyframes hintPulse{0%{transform:scale(1);box-shadow:0 0 rgba(255,193,7,0)}50%{transform:scale(1.08);box-shadow:0 0 40px 12px #ffc107}100%{transform:scale(1);box-shadow:0 0 rgba(255,193,7,0)}}@keyframes foundationComplete{0%{transform:translate(-50%,-50%)scale(0)}50%{transform:translate(-50%,-50%)scale(1.3)}100%{transform:translate(-50%,-50%)scale(1)}}#content-container{width:70vw;margin:0;padding:20px;background:rgba(0,0,0,.2);border-radius:8px;backdrop-filter:blur(10px);box-sizing:border-box;display:flex;flex-direction:column;align-items:center;order:2;content-visibility:auto;h1 { color: #4caf50; font-size: 2rem; margin-bottom: 1.5rem; text-align: center; }}.content-wrapper{padding:1rem;width:100%;.intro { text-align: center; max-width: 800px; margin: 0 auto 2rem auto; font-size: 1.1rem; line-height: 1.8; color: #ffffff; } h2 { color: #4caf50; margin: 2rem 0 1rem; } h3 { color: #4caf50; margin: 1.5rem 0 1rem; } p { margin-bottom: 1rem; line-height: 1.6; max-width: 800px; } ul { list-style-type: disc; margin-left: 1.5rem; margin-bottom: 1.5rem; max-width: 800px; text-align: left; }}#main-content{visibility:visible;min-height:60vh;order:1}.main-layout{display:flex;flex-direction:column;align-items:left;gap:20px}.game-area{display:block}.ad-rail{display:none}@media(orientation:landscape){.game-layout{display:flex;align-items:flex-start;gap:16px}.ad-rail{display:none;width:calc(30vw - 16px);grid-template-columns:1fr minmax(160px,300px);gap:12px;align-content:start;max-height:100vh;overflow-y:auto}body.show-ads .ad-rail{display:grid}.ad-col{display:block}.ad-rail .adsbygoogle{width:100%}}.lang-dropdown{position:relative;display:inline-block;summary { list-style: none; } summary::-webkit-details-marker { display: none; } &[open] .lang-menu { display: grid; }}.lang-current{display:inline-flex;align-items:center;justify-content:center;width:32px;height:28px;padding:0 6px;cursor:pointer}.flag{font-size:18px;line-height:1}.lang-menu{position:absolute;top:calc(100% + 6px);left:0;display:none;grid-template-columns:1fr;gap:6px;padding:8px;min-width:160px;z-index:1000}.lang-item{width:32px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;text-decoration:none;color:inherit;&:hover { background:rgba(255,255,255,0.1); }}.win-popup{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);display:flex;justify-content:center;align-items:center;z-index:1000;.win-popup-content { background: linear-gradient(145deg, #1e502f, #234a2f); padding: 2rem; border-radius: 15px; text-align: center; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); border: 2px solid #4caf50; max-width: 90%; width: 400px; position: relative; } h2 { color: #4caf50; margin-bottom: 1.5rem; } p { color: #ffffff; line-height: 1.8; margin-bottom: 2rem; } button { background: #4caf50; color: white; border: none; padding: 12px 24px; border-radius: 6px; cursor: pointer; font-size: 1.1rem; &:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); } } .win-actions { display: flex; gap: 12px; justify-content: center; margin-bottom: 1rem; flex-wrap: wrap; } .win-popup-close { position: absolute; top: 10px; right: 10px; background: transparent; color: #ffffff; border: none; cursor: pointer; font-size: 1rem; line-height: 1; padding: 6px; border-radius: 6px; &:hover { background: rgba(255, 255, 255, 0.1); } }}@media(orientation:portrait){#game-board{--board-padding:0px;width:100vw;padding:var(--board-padding);padding-top:8px;padding-bottom:8px;box-sizing:border-box;--grid-width:100vw;--card-spacing:clamp(4px, calc(var(--grid-width) * 0.008), 10px);--tableau-offset-face-up:calc(var(--card-width) * 0.35);--tableau-offset-face-down:calc(var(--card-width) * 0.12)}#content-container{width:100vw}}