/* SECTION 1: GLOBAL */
html,body{zoom:100%;}

/* SECTION 2: OVERLAYS */
#cardflip-level-complete-modal,#deck-styles-modal,#cardflip-level-select-modal,#win-modal,#modal{display:none;position:fixed;inset:0;width:100%;height:100%;z-index:10000;overflow:auto;background-color:rgba(0,0,0,.5);}

/* SECTION 3: CONTENT CONTAINERS */
#cardflip-level-complete-modal .modal-content,#deck-styles-modal .modal-content,#modal.resetgame-modal .modal-content,#cardflip-level-select-modal .modal-content{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);background:#fff;color:#111;padding:0;border-radius:8px;width:90%;max-width:500px;text-align:center;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.2);}

/* SECTION 4: MODAL HEADER */
#cardflip-level-complete-modal .modal-header,#cardflip-level-select-modal .modal-header,#deck-styles-modal .modal-header,#modal:not(.game-mode-modal):not(.challenge-mode-modal) .modal-header{...}
#cardflip-level-complete-modal .modal-header h2,#cardflip-level-select-modal .modal-header h2,#deck-styles-modal .modal-header h2,#modal .modal-header h2{margin:0;font-size:20px;}
#cardflip-level-complete-modal .modal-close,#cardflip-level-select-modal .modal-close,#win-modal .modal-close,#modal .modal-close{color:#aaa;font-size:35px;cursor:pointer;margin-left:auto;line-height:1;}
#deck-styles-modal .modal-close{display:none!important;}

/* SECTION 5: MODAL BODY */
#cardflip-level-complete-modal .modal-body,#deck-styles-modal .modal-body,#cardflip-level-select-modal .modal-body,#modal:not(.game-mode-modal):not(.challenge-mode-modal) .modal-body{...}

/* SECTION 6: SETTINGS WRAPPER */
#modal.settings-modal-wrapper .modal-content{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:90%;max-width:550px;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.2);}
#modal.settings-modal-wrapper .modal-body{padding:0!important;}
#modal.settings-modal-wrapper .modal-header{background-color:#1f1e1e;padding:10px 20px 10px 16px;}
#modal.settings-modal-wrapper .modal-header h2{margin:0;font-size:20px;font-weight:bold;}
#modal.settings-modal-wrapper .modal-close{color:#aaa;font-size:35px;cursor:pointer;margin-left:auto;line-height:1;}
#modal.settings-modal-wrapper .modal-close:hover{color:#333;}
#modal.settings-modal-wrapper .modal-body.settings-layout{display:flex;min-height:300px;background:#fff;overflow:hidden;}
#modal.settings-modal-wrapper .modal-settingsidebar{width:150px;background-color:#2c3e50;color:#fff;border-right:1px solid rgba(0,0,0,.15);}
#modal.settings-modal-wrapper .modal-settingsidebar ul{list-style:none;margin:0;padding:0;}
#modal.settings-modal-wrapper .modal-settingsidebar li{padding:12px 16px;text-indent:4px;border-bottom:1px solid #34495e;cursor:pointer;font-size:16px;transition:background .2s ease;}
#modal.settings-modal-wrapper .modal-settingsidebar li:hover,#modal.settings-modal-wrapper .modal-settingsidebar li.active{background-color:#34495e;color:#fff;}
#modal.settings-modal-wrapper .modal-settingscontent{flex:1;overflow-y:auto;color:#333;margin-top:0;padding:20px;word-wrap:break-word;overflow-wrap:break-word;}

/* SECTION 8: SLIDERS */
.slider-row{display:flex;flex-direction:column;margin-bottom:clamp(8px,2vw,20px);padding-left:clamp(8px,2vw,24px);padding-right:clamp(8px,2vw,24px);}
.volume-label{display:flex;justify-content:space-between;font-size:clamp(14px,1.8vw,16px);margin-bottom:clamp(4px,1vw,10px);color:#2c2c2c;}
.volume-label .volume-value{margin-left:8px;font-weight:bold;font-size:clamp(14px,1.8vw,16px);color:#4f4f4f;}
.slider-row input[type="range"]{width:100%;height:clamp(4px,1.2vw,80px);margin-top:clamp(2px,.5vw,4px);border-radius:5px;background:#ddd;accent-color:#8B4513;outline:none;cursor:pointer;}
.slider-row input[type="range"]::-webkit-slider-thumb,.slider-row input[type="range"]::-moz-range-thumb,.slider-row input[type="range"]::-ms-thumb{width:17px;height:17px;border-radius:20%;background:#29333b;border:2px solid #29333b;cursor:pointer;}

/* SECTION 9: BUTTONS & INPUTS */
.accept-button,#cardflip-intro-next,#cardflip-welcome-continue,#cardflip-level-continue,#cardflip-start-level-btn,#save-deck-style{display:inline-block;padding:10px 20px;min-width:140px;font-size:16px;margin-top:15px;border:0;border-radius:6px;cursor:pointer;transition:background-color .2s ease;color:#fff;background:#007bff;}
.accept-button:hover,#cardflip-intro-next:hover,#cardflip-welcome-continue:hover,#cardflip-level-continue:hover,#cardflip-start-level-btn:hover{background:#0056b3;}
#save-deck-style,#cardflip-start-level-btn{background:#27ae60;}
#save-deck-style:hover,#cardflip-start-level-btn:hover{background:#1e874b;}
#cardflip-username-input{padding:10px;font-size:16px;width:250px;border-radius:6px;border:1px solid #ccc;text-align:center;display:block;margin:0 auto;}
.field-error,#cardflip-username-error{font-size:13px;color:red;display:none;margin-top:8px;text-align:center;}
.secondary-button{display:inline-block;padding:10px 20px;min-width:140px;font-size:16px;margin-top:15px;border:0;border-radius:6px;cursor:pointer;transition:background-color .2s ease;color:#fff;background:#1B2A49;}
.secondary-button:hover{background:#0F1A30;}

/* SECTION 10: CARD BACK PREVIEW */
.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 center;background-size:120%;border:2px solid #000;border-radius:8px;display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer;user-select:none;font-size:clamp(28px,5vw,44px);font-weight:bold;color:transparent;transition:background-color .3s,color .3s,transform .4s;transform-style:preserve-3d;}
.cardflip-card[data-face-up="true"]{background-image:none;background-color:#fff;color:#000;transform:rotateY(180deg) scaleX(-1);}
.cardflip-card.matched{background-color:#fff!important;color:#3b7a00!important;border-color:#3b7a00;pointer-events:none;}
.cardflip-card .cardflip-card-top{display:none;}
.cardflip-card-inner{position:absolute;inset:0;backface-visibility:hidden;}
.cardflip-card-front{display:flex;align-items:center;justify-content:center;background-image:url("assets/images/cardStyles/cardstyledefault.png");background-size:120%;background-repeat:no-repeat;background-position:center;}
.cardflip-card-back{display:flex;align-items:center;justify-content:center;background-color:#fff;color:#000;transform:rotateY(180deg);}
.cardflip-card.cardflip-red-suit .cardflip-card-center{color:red;}
.cardflip-card[data-face-up="true"].cardflip-red .cardflip-card-center{color:red!important;}
#timer{font-size:24px!important;font-weight:700;}
.time-value{font-weight:700;font-size:inherit;}

/* SECTION 11: DECK STYLES MODAL */
#deck-styles-modal .modal-content{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;border-radius:8px;padding:0;margin:auto;}
#deck-styles-modal .modal-body{padding:0;margin:0;overflow:hidden;}
#deck-styles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));justify-content:center;gap:12px;max-height:300px;overflow-y:auto;padding:12px;box-sizing:border-box;}
#deck-styles-grid::-webkit-scrollbar{width:10px;}
#deck-styles-grid::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3);border-radius:6px;}
#deck-styles-grid::-webkit-scrollbar-track{background:transparent;}
.deck-option{width:90px;height:120px;border-radius:8px;cursor:pointer;border:2px solid #000;transition:transform .2s ease-in-out;display:inline-block;background-size:120%;background-position:center center;background-repeat:no-repeat;margin:0 auto;}
.deck-option:hover{transform:scale(1.2);}
.deck-option.selected{border:4px solid #c8f902;}
.deck-option.locked{filter:grayscale(100%);opacity:.6;cursor:not-allowed;}
#save-deck-style{display:block;margin:5px auto 24px auto;padding:12px;color:#fff;border:none;cursor:pointer;}
.deck-save-text{color:#4d4b4b;font-size:18px;text-align:center;font-weight:bold;margin-top:12px;margin-bottom:4px;}
.deck-info-text{text-align:center;font-size:14px;color:#888;margin:12px 0;}

/* SECTION 12: RESET CONFIRM */
.reset-content p{color:#333;font-size:16px;text-align:center;margin:0 0 10px 0;}
.reset-buttons{display:flex;justify-content:center;gap:10px;margin-top:20px;}
.reset-buttons button{font-size:16px;padding:10px 20px;border:none;border-radius:5px;cursor:pointer;background-color:#007BFF;color:white;transition:background-color .2s ease-in-out;min-width:50px;margin-top:-6px;}
.reset-buttons button:hover{background-color:#0056b3;}
#reset-no{background-color:#1B2A49;}
#reset-no:hover{background-color:#0F1A30;}
.resetgame-modal .modal-content{pointer-events:auto;padding:0;border-radius:8px;z-index:10001;}
.modal.resetgame-modal .modal-content{max-width:420px;margin:0 auto;}

/* SECTION 13: WELCOME MODAL */
.modal.welcome-modal .modal-content{max-width:450px;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;border-radius:8px;margin:auto;}

/* SECTION 14: STATS MODAL */
.stats-modal .modal-content{width:450px;max-width:90vw;position:fixed;left:50%;top:50%;height:520px;transform:translate(-50%,-50%);background:#fff;border-radius:8px;margin:auto;}
.stats-modal .modal-body{padding-top:8px!important;}
.stats-layout{position:relative;display:flex;flex-direction:column;margin-top:0;padding-top:0;}
.stats-content{flex:1;pointer-events:auto;padding:20px;border-radius:8px;z-index:10001;}
.stats-content p{margin:0!important;}
.stats-character{position:absolute;bottom:10px;right:10px;max-width:clamp(100px,30vw,150px);height:auto;margin-bottom:0!important;}
.stats-header{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:8px;margin:6px auto 14px;padding:0 6px;}
.stats-chevron{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:6px;border:0;background:#e7e7e7;color:#111;cursor:pointer;}
.stats-chevron:hover{background:#d7d7d7;}
.stats-label{text-align:center;font-weight:700;font-size:16px;color:#222;}
.stats-grid .stats-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #eee;}
.stats-grid .stats-row:last-child{border-bottom:0;}
.stats-grid .label{color:#555;}
.stats-grid .value{color:#111;font-weight:600;}
.level-bests-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px;}
.level-best{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;background:#f6f6f6;border-radius:6px;}
.level-best .lb-label{color:#555;}
.level-best .lb-value{color:#111;font-weight:600;}
.challenge-stats-modal .modal-body{padding:16px;}
.challenge-stats .grid{display:grid;gap:12px;grid-template-columns:1fr 1fr;}
.challenge-stats




/* WELCOME MODAL — OVERLAY */
#cardflip-welcome-modal{display:none;position:fixed;inset:0;width:100%;height:100%;z-index:10000;overflow:hidden;pointer-events:auto;}
#cardflip-welcome-modal{z-index:2147483647;}


/* WELCOME MODAL — DIM LAYER */
#cardflip-welcome-modal .cardflip-welcome-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);pointer-events:auto;}

/* WELCOME MODAL — SHELL */
#cardflip-welcome-modal .cardflip-welcome-shell{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;color:#111;padding:0;border-radius:8px;width:90%;max-width:500px;text-align:center;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.2);min-height:375px;isolation:isolate;pointer-events:auto;z-index:1;}

/* BODY */
#cardflip-welcome-modal .cardflip-welcome-body{padding-top:150px;padding-bottom:0;}

/* BACKGROUND IMAGE */
#cardflip-welcome-modal .cardflip-welcome-bg{position:absolute;inset:-2px;background-image:url("../assets/images/helpers/cardflip_welcome.png");background-repeat:no-repeat;background-position:center 110%;background-size:110% 105%;opacity:1;pointer-events:none;z-index:0;}

/* FOREGROUND CONTENT */
#cardflip-welcome-modal .cardflip-welcome-shell>*:not(.cardflip-welcome-bg){position:relative;z-index:1;}

/* PLAY BUTTON */
#cardflip-welcome-continue{display:inline-block;margin-top:155px;}



/* Characters */
#cardflip-welcome-modal .modal-content{position:relative;}
#cardflip-welcome-modal .modal-floating-character{position:absolute;top:6px;right:12px;width:96px;pointer-events:none;z-index:2;}
#cardflip-welcome-modal .modal-floating-character img{display:block;width:auto;max-height:300px;}




/* SECTION 15: GAME MODE + CHALLENGE MODE MODALS (inline and isolated) */
#modal.game-mode-modal .modal-content,#modal.challenge-mode-modal .modal-content{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:92%;max-width:500px;background:#0f1720;border-radius:10px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.55);}
#modal.game-mode-modal .modal-header,#modal.challenge-mode-modal .modal-header{display:flex;align-items:center;gap:10px;text-align:left;background-color:#1f1e1e;color:#fff;padding:12px 20px;}
#modal.game-mode-modal .modal-header h2,#modal.challenge-mode-modal .modal-header h2{margin:0;font-size:20px;font-weight:700;}
#modal.game-mode-modal .modal-close,#modal.challenge-mode-modal .modal-close{color:#aaa;font-size:35px;cursor:pointer;margin-left:auto;line-height:1;}
#modal.game-mode-modal .modal-body,#modal.challenge-mode-modal .modal-body{padding:16px;background:transparent;color:#fff;}
#modal.game-mode-modal .modal-body * ,#modal.challenge-mode-modal .modal-body *{box-sizing:border-box;}

/* Top bar */
#modal.game-mode-modal .gamemode-topbar,#modal.challenge-mode-modal .gamemode-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px 0;}
#modal.game-mode-modal .text-link,#modal.challenge-mode-modal .text-link{background:transparent;border:0;padding:0;font:inherit;color:#fff;cursor:pointer;text-decoration:underline;}
#modal.game-mode-modal .challenge-note,#modal.challenge-mode-modal .challenge-note{min-height:18px;font-size:13px;opacity:.85;}

/* Grid */
#modal.game-mode-modal .gamemode-grid,#modal.challenge-mode-modal .gamemode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;margin:0 0 14px 0;}
@media (max-width:700px){#modal.game-mode-modal .gamemode-grid,#modal.challenge-mode-modal .gamemode-grid{grid-template-columns:1fr;}}

/* Cards */
#modal.game-mode-modal .gamemode-card,#modal.challenge-mode-modal .gamemode-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:6px;width:100%;padding:14px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;text-align:left;}
#modal.game-mode-modal .gamemode-card:hover,#modal.challenge-mode-modal .gamemode-card:hover{background:rgba(255,255,255,.12);}
#modal.game-mode-modal .gamemode-card.selected,#modal.challenge-mode-modal .gamemode-card.selected{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.18);}
#modal.game-mode-modal .gamemode-card:focus,#modal.challenge-mode-modal .gamemode-card:focus{outline:2px solid rgba(255,255,255,.65);outline-offset:2px;}

/* Text */
#modal.game-mode-modal .gm-title,#modal.challenge-mode-modal .gm-title{font-size:16px;font-weight:700;line-height:1.1;}
#modal.game-mode-modal .gm-subtitle,#modal.challenge-mode-modal .gm-subtitle{font-size:13px;opacity:.9;line-height:1.2;}
#modal.game-mode-modal .gm-preview,#modal.challenge-mode-modal .gm-preview{margin-top:auto;font-size:13px;opacity:.95;line-height:1.2;letter-spacing:.2px;}

/* Actions and note */
#modal.game-mode-modal .gamemode-actions,#modal.challenge-mode-modal .gamemode-actions{display:flex;justify-content:flex-start;width:100%;margin:6px 0 8px 0;}
#modal.game-mode-modal .gamemode-note,#modal.challenge-mode-modal .gamemode-note{margin:0;font-size:13px;opacity:.85;}