/* 1 - BASE & RESET */
html,body{user-select:none;-webkit-user-select:none;-ms-user-select:none;height:100%;overflow:hidden;}
input,textarea{user-select:text;-webkit-user-select:text;-ms-user-select:text;}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:Arial,sans-serif;background-color:#e5f0df;color:#fff;display:flex;flex-direction:column;min-height:100vh;}
body.modal-open{overflow:hidden;}
body.modal-open #game-container{visibility:hidden;}

/* 2 - BACKGROUND VIDEO */
#background-video{position:fixed;top:0;left:0;width:100vw;height:100vh;object-fit:cover;z-index:-1;pointer-events:none;}

/* 3 - HEADER */
header{position:relative;width:100%;height:60px;background-color:#333;}
#header-rectangle{width:min(600px,100%);height:65px;margin:0 auto;background-color:#333;position:relative;}
#header-group{position:relative;display:flex;align-items:center;height:100%;padding:0 12px;}

/* ICON BUTTONS */
.iconBtn{background:transparent;border:0;padding:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.iconSvg{width:22px;height:22px;fill:#fff;opacity:.9;}
.iconBtn:hover .iconSvg{opacity:1;}

/* HOME (fixed left) */
#home-btn{position:absolute;left:12px;top:50%;transform:translateY(-50%);}

/* LEFT CLUSTER */
#settings-btn{position:absolute;left:54px;top:50%;transform:translateY(-50%);}
#deck-collection-btn{position:absolute;left:96px;top:50%;transform:translateY(-50%);}

/* RIGHT CLUSTER */
#stats-btn{position:absolute;right:96px;top:50%;transform:translateY(-50%);}
#undo-btn{position:absolute;right:54px;top:50%;transform:translateY(-50%);}
#reset-game-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);}

/* TIMER BLOCK (absolute center of the 600px header) */
#timer-block{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;z-index:2;}
#timer-title{font-size:12px;font-weight:700;letter-spacing:.08em;color:#fff;opacity:.9;margin-bottom:3px;}
#timer{font-size:28px;font-weight:800;color:#fff;width:auto;text-align:center;}

/* SCORE/MOVES (locked to the timer, never overlaps it) */
#score-container{position:absolute;left:50%;top:50%;transform:translate(-155px,-50%);display:flex;flex-direction:column;align-items:center;font-size:12px;line-height:1.05;opacity:.95;min-width:70px;z-index:1;}
#moves-container{position:absolute;left:50%;top:50%;transform:translate(110px,-50%);display:flex;flex-direction:column;align-items:center;font-size:12px;line-height:1.05;opacity:.95;min-width:70px;z-index:1;}




/* 4 - FIXED FOOTER (HUB STYLE) */
:root{--stage:600px;--footerH:20px;--bar:#333;}
.gameFooter{position:fixed;bottom:0;left:0;width:100%;height:var(--footerH);z-index:900;display:flex;justify-content:center;pointer-events:none;}
.gameFooter .bar{width:min(var(--stage),100%);height:var(--footerH);background:var(--bar);display:flex;align-items:center;justify-content:center;pointer-events:auto;}
.gameFooter .footerLabel{font-size:10px;font-weight:800;letter-spacing:.12em;color:#fff;opacity:.95;}


/* 5 - MAIN GAME AREA (NO PAGE SCROLL) */
#game-container{height:calc(100vh - 125px);flex:0 0 auto;display:flex;flex-direction:column;justify-content:space-between;max-width:900px;margin:0 auto;padding:10px;align-items:center;overflow:hidden;}
#top-section{display:flex;flex-direction:column;align-items:center;}
#board-container{width:100%;max-width:600px;margin:0 auto;display:flex;flex-direction:column;align-items:center;padding-left:2px;overflow:visible;}
#top-row,#tableau{display:flex;justify-content:center;gap:0;margin-top:10px;margin-bottom:6px;}
.top-area,.tableau-column{width:clamp(38px,12vw,65px);height:clamp(48px,16vw,85px);position:relative;margin:0 2px;}
#empty-area{border:none !important;}
#opponent-space{display:flex;justify-content:center;align-items:center;margin-bottom:10px;}
.opponent-placeholder{width:200px;height:150px;display:flex;justify-content:center;align-items:center;text-align:center;}

/* 6 - CARDS */
.card{width:clamp(38px,12vw,65px);height:clamp(48px,16vw,85px);background-color:#fff;position:relative;border-radius:4px;border:2px solid #ebe8e8;overflow:hidden;pointer-events:auto;}
.card-top{position:absolute;top:1.5px;left:5px;font-size:clamp(10px,2vw,17px);font-weight:bold;line-height:1;}
.card-center{position:absolute;top:60%;left:50%;transform:translate(-50%,-50%);font-size:clamp(24px,5vw,48px);line-height:1;}
.card[data-suit="diamonds"] .big-suit,.card[data-suit="hearts"] .big-suit{color:red;}
.card[data-suit="clubs"] .big-suit,.card[data-suit="spades"] .big-suit{color:black;}
.card[data-face-up="false"]{background-repeat:no-repeat;background-position:center;background-size:120%;color:transparent !important;border:2px solid #000;}
#stock .card,#waste .card{position:absolute;top:0;left:0;}
.card *{pointer-events:none;}

/* 7 - FOUNDATIONS */
.foundation{position:relative;width:clamp(38px,12vw,65px);height:clamp(48px,16vw,85px);background-repeat:no-repeat;background-position:center;background-size:contain;z-index:1;display:flex;align-items:center;justify-content:center;}
.foundation-bg{position:absolute;width:clamp(34px,11vw,60px);height:clamp(44px,14vw,80px);overflow:hidden;pointer-events:none;margin-top:2.5px;margin-left:2.5px;z-index:0;opacity:.4;}

/* 8 - MODALS */
.modal{display:none;position:fixed;z-index:10000;inset:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,.5);}
.modal-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fefefe;padding:0;border:1px solid #888;width:80%;max-width:580px;border-radius:8px;overflow:hidden;}
.accept-button{background-color:#007bff;color:#fff;border:none;border-radius:5px;padding:8px 16px;font-size:16px;cursor:pointer;transition:background-color .2s ease;}
.accept-button:hover{background-color:#0056b3;}

/* 9 - STATS MODAL CONTENT */
label{color:black;}
.stats-content{font-size:16px;color:#444;padding:1em;line-height:1.5;}
.stats-content p{margin-bottom:.5em;}

/* 10 - SUIT ANIMATION */
@keyframes suit-pop{0%{transform:scale(1);opacity:0;}50%{transform:scale(2.5);opacity:1;}100%{transform:scale(1.75);opacity:0;}}
.suit-animation{font-size:24px;font-weight:bold;pointer-events:none;animation:suit-pop 1s ease-out forwards;}

/* 11 - RESPONSIVE */
@media (min-width:600px){.modal-content{padding:0 !important;}}