/* CardFlip – style.css | Cozy fixed header footer, centered grid */

/* 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;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;pointer-events:none;}

/* 3) HEADER */
header{position:fixed;top:0;left:0;right:0;z-index:9000;display:flex;justify-content:center;height:65px;background:transparent;}
#header-rectangle{width:min(600px,100%);height:60px;margin:0 auto;background-color:#333;display:flex;align-items:center;justify-content:center;}
#header-group{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:20px;}
#settings-btn{background:none;border:none;cursor:pointer;color:#fff;}
#reset-game-btn{padding:6px 12px;font-size:14px;cursor:pointer;background:#eee;border-radius:5px;border:1px solid #ccc;white-space:nowrap;}
.header-block{display:flex;flex-direction:column;align-items:center;min-width:60px;}
.header-label{font-size:12px;color:#ccc;}
.header-value,.header-timer{font-size:18px;font-weight:bold;color:#fff;}

/* 5) BOARD AREA */
#cardflip-area-wrapper{position:fixed;top:60px;bottom:60px;left:0;right:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;align-items:center;padding-block:8px;}
#cardflip-cards-container{display:grid;gap:10px;width:max-content;margin-block:auto;justify-items:center;align-items:start;}
#cardflip-area-wrapper{scrollbar-width:none;-ms-overflow-style:none;}
#cardflip-area-wrapper::-webkit-scrollbar{display:none;}

/* 6) CARD BASE */
.card,.cardflip-card{width:clamp(48px,14vw,90px);height:clamp(64px,18vw,120px);background-image:url("assets/images/cardStyles/cardstyledefault.png");background-repeat:no-repeat;background-position:center;background-size:contain;border:2px solid #000;border-radius:8px;position:relative;cursor:pointer;user-select:none;color:transparent;transition:transform .4s ease,background-color .3s ease,color .3s ease;transform-style:preserve-3d;}
.card.matched,.cardflip-card.matched{pointer-events:none;}
.cardflip-card-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:clamp(24px,5vw,42px);line-height:1;color:transparent;user-select:none;pointer-events:none;backface-visibility:hidden;}

/* 7) UTILITIES */
#save-deck-style{display:block;background-color:#27ae60;color:#fff;border:none;border-radius:0;cursor:pointer;font-size:16px;transition:background-color .2s ease;margin:1px auto 12px;padding:10px 16px;}
#save-deck-style:hover{background-color:#1e874b;}
#cards-flipped-tracker{color:#fff;}

/* 8) RESPONSIVE */
@media (max-width:480px){
.footer-button,#game-mode-btn,#deck-collection-btn,#stats-btn,#levels-btn{font-size:13px;padding:8px 10px;min-width:64px;}
}

/* 9) COLORS MODE */
body.colors-mode .cardflip-card[data-face-up="true"],body.colors-mode .cardflip-card.is-matched{background-image:none!important;}
body.colors-mode .cardflip-card{padding:0 2px;container-type:inline-size;}
body.colors-mode .cardflip-card[data-face-up="true"]{transform:rotateY(180deg) scaleX(-1);}
body.colors-mode .cardflip-card .cardflip-card-center{display:flex;align-items:center;justify-content:center;font-weight:700;font-size:clamp(16px,18cqw,96px);line-height:1;width:100%;height:100%;white-space:nowrap;overflow:hidden;--fit-scale:1;transform:rotateY(180deg) scaleX(-1) scale(var(--fit-scale));transform-origin:center;will-change:transform;}
body.colors-mode .cardflip-card[data-face-up="true"] .cardflip-card-center{color:inherit;}

/* 10) SHAPES MODE */
body.shapes-mode .cardflip-card .cardflip-card-center{position:relative;width:100%;height:100%;display:grid;place-items:center;color:transparent;backface-visibility:hidden;transform:rotateY(180deg) scaleX(-1);}
body.shapes-mode .cardflip-card[data-face-up="true"]{transform:rotateY(180deg) scaleX(-1);}
body.shapes-mode .cardflip-card-center.shape-icon::before{content:"";position:absolute;--inset-h:12%;--inset-v:12%;inset:var(--inset-v) var(--inset-h);background:#5a5a5a;}
body.shapes-mode .shape-icon[data-shape="circle"]::before{border-radius:50%;}
body.shapes-mode .shape-icon[data-shape="square"]::before{border-radius:8%;}
body.shapes-mode .shape-icon[data-shape="rounded_square"]::before{border-radius:20%;}
body.shapes-mode .shape-icon[data-shape="diamond"]::before{inset:14% 14%;clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);}
body.shapes-mode .shape-icon[data-shape="rhombus"]::before{inset:16% 14%;clip-path:polygon(50% 6%,92% 50%,50% 94%,8% 50%);}

/* 11) STATE FIXES */
.cardflip-card[data-face-up="false"] .cardflip-card-center{visibility:hidden;opacity:0;}
body.prestart #cardflip-cards-container{display:none;}
.cardflip-card.challenge-blank .cardflip-card-center{visibility:hidden!important;opacity:0!important;pointer-events:none;}
.cardflip-card[data-face-up="true"].challenge-blank{background-image:none!important;}
.cardflip-card.flipping-down .cardflip-card-center{visibility:visible!important;opacity:1!important;}