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

/* SECTION 2: OVERLAYS */
#cardflip-intro-modal,
#cardflip-welcome-modal,
#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 (CENTERED) */
#cardflip-intro-modal .modal-content,
#cardflip-welcome-modal .modal-content,
#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);
}

#cardflip-welcome-modal .modal-content { overflow: visible; }


/* SECTION 4: MODAL HEADER (GENERIC) */
#cardflip-intro-modal .modal-header,
#cardflip-welcome-modal .modal-header,
#cardflip-level-complete-modal .modal-header,
#cardflip-level-select-modal .modal-header,
#deck-styles-modal .modal-header,
#modal .modal-header {
  display: flex; align-items: center; gap: 10px; text-align: left;
  background-color: #1f1e1e; color: #fff; padding: 10px 20px;
  border-top-left-radius: 8px; border-top-right-radius: 8px;
}
#cardflip-intro-modal .modal-header h2,
#cardflip-welcome-modal .modal-header h2,
#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-intro-modal .modal-close,
#cardflip-welcome-modal .modal-close,
#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 (DEFAULT) */
#cardflip-intro-modal .modal-body,
#cardflip-welcome-modal .modal-body,
#cardflip-level-complete-modal .modal-body,
#deck-styles-modal .modal-body,
#cardflip-level-select-modal .modal-body,
#modal .modal-body { padding-top: 20px; padding-bottom: 30px; }


/* SECTION 6: COZY SETTINGS WRAPPER (scoped to #modal having the class) */
#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; }

/* Header + title + close icon */
#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;
}
/* (JS already toggles the close icon’s display; no need to force it here) */
#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; }

/* SETTINGS LAYOUT (SIDEBAR + CONTENT) */
#modal.settings-modal-wrapper .modal-body.settings-layout {
  display: flex; min-height: 300px; background: #fff; overflow: hidden;
}

/* Sidebar */
#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;
}

/* Content */
#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 (VOLUME) */
.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 (CARDFLIP) */
.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; }

/* UNIVERSAL SECONDARY BUTTON (shared by reset + confirm modals) */
.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) */
.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 (COZY PARITY) */
#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; }

/* Custom scrollbar */
#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: NEW GAME / RESET CONFIRM (COZY PARITY) */
.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 (COZY PARITY) */
.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 (COZY SHELL + CARDFLIP HEADER) */
.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;
}
/* Cardflip stats header controls */
.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 layout */
.challenge-stats-modal .modal-body { padding: 16px; }
.challenge-stats .grid { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.challenge-stats .card { border: 1px solid #ddd; border-radius: 8px; padding: 12px; }
.challenge-stats .card .title { font-weight: 600; margin-bottom: 8px; }
.challenge-stats .row { display: flex; justify-content: space-between; padding: 6px 0; }
.challenge-stats .row + .row { border-top: 1px dashed #eee; }
.challenge-stats .note { margin-top: 8px; font-size: .9rem; color: #666; }
.challenge-stats .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.challenge-stats .btn { padding: 8px 12px; border-radius: 8px; border: 1px solid #ccc; background: #f6f6f6; cursor: pointer; }
.challenge-stats .btn.primary { background: #111; color: #fff; border-color: #111; }
.challenge-stats .btn.danger { background: #fff; color: #c33; border-color: #c33; }

/* Decorative Stats GIF */
/* Make the modal body a positioning context for the GIF */
.stats-modal .modal-body { position: relative; }

/* Keep the content from colliding with the GIF at the bottom */
.stats-modal .stats-content { padding-bottom: 140px; }
.stats-gif-container{ position: absolute; top: -95px; right: 75px; z-index: 10000; pointer-events: none; }
.stats-gif{width:140px;height:auto;opacity:.95}



/* SECTION 15: LEVEL SELECT (CARDFLIP) — FIXED */
#cardflip-level-select-modal .modal-content { width:600px; max-width:95vw; border-radius:10px; text-align:center; }
#cardflip-level-select-modal .modal-body { padding:20px 24px 24px; }
#cardflip-level-select-modal #cardflip-level-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px; }
#cardflip-level-select-modal .cardflip-level-btn { display:flex; flex-direction:column; justify-content:space-between; align-items:center; padding:20px 10px; border:3px solid #666; border-radius:6px; background-color:#aaa; color:#fff; font-size:22px; font-weight:700; height:140px; cursor:pointer; transition:all .2s ease-in-out; }
#cardflip-level-select-modal .cardflip-level-btn span { font-size:14px; color:#000; font-weight:400; background-color:#fff; width:100%; text-align:center; padding:4px 0; margin-top:12px; border-top:2px solid #666; }
#cardflip-level-select-modal .cardflip-level-btn:hover { background-color:#888; }
#cardflip-level-select-modal .cardflip-level-btn.selected { outline:4px solid #27ae60; outline-offset:-4px; }
#cardflip-level-select-modal #cardflip-start-level-btn { margin-top:20px; }


/* SECTION 16: WELCOME FLOATING CHARACTER (CARDFLIP) */
.welcome-back { position: relative; overflow: visible; }
.modal-floating-character { position: absolute; top: -120px; right: 10px; z-index: 10000; pointer-events: none; }
.modal-floating-character img { min-width: 120px; max-width: 140px; height: auto; display: block; }
#cardflip-welcome-greeting { font-size: 20px; margin-top: -8px; margin-bottom: 4px; }
#cardflip-welcome-continue { margin-top: 18px; margin-bottom: -14px; }

/* SECTION 17: RESPONSIVE TWEAKS */
@media (min-width: 481px) {
  #deck-styles-modal .modal-content { width: 560px; max-width: 100%; }
  #deck-styles-grid { grid-template-columns: repeat(5, 90px); column-gap: 12px; row-gap: 12px; }
  .deck-option { width: 90px; height: 120px; }
}



/* SECTION 20: Unique Game Mode Modal */
#modal.game-mode-modal .modal-content{
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(680px, 92vw); background:#fff; border-radius:8px; overflow:hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,.2);
}
#modal.game-mode-modal .modal-body { padding: 16px 16px 20px; }

.gamemode-layout .gamemode-grid{
  display:flex; justify-content:center; align-items:stretch; gap:10px; flex-wrap:wrap;
}
.gamemode-card{
  appearance:none; border:2px solid #cfcfcf; background:#f5f5f5; color:#111;
  border-radius:8px; padding:10px 12px; width:200px; text-align:center; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.gamemode-card:hover{ transform:translateY(-1px); box-shadow:0 2px 8px rgba(0,0,0,.1); }
.gamemode-card.selected{ border-color:#27ae60; box-shadow:0 0 0 3px rgba(39,174,96,.25); background:#ffffff; }
.gm-title{ font-weight:700; margin-bottom:2px; }
.gm-subtitle{ font-size:13px; color:#555; margin-bottom:6px; }
.gm-preview{ font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; font-weight:700; }
.gm-preview.normal{ letter-spacing:.5px; }
.gamemode-card.disabled{ opacity:.55; cursor:not-allowed; filter:grayscale(100%); }

.gamemode-actions{ display:flex; justify-content:center; gap:10px; margin-top:0px; }
.gamemode-note{ text-align:center; color:#444; margin:10px 0 0; font-size:14px; }

/* keyboard focus visible */
.gamemode-card:focus-visible{ outline:3px solid #2d7dff; outline-offset:2px; }

#modal.resetgame-modal .modal-content{ max-width: 350px; }




/* ============================================================
   1.01 Patch Update
   - Challenge modes, gating visuals, and shared layout tweaks
   (UPDATED to stop right-edge “jump” on click/focus)
   ============================================================ */

/* 1 - Topbar container (Challenge link + note) */
.gamemode-layout .gamemode-topbar {
  display: block;                 /* simpler: let text-align handle right edge */
  margin: -6px 8px 10px 0;
  text-align: right;              /* keeps the link pinned right */
}

/* 2 - Challenge link button */
.gamemode-layout #challenge-text-link,
.gamemode-topbar .text-link {
  all: unset;
  display: inline-block;          /* respect text-align: right */
  font: 600 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial;
  color: #2b6cb0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: opacity 0.15s ease;
  border-radius: 4px;

  /* No layout shift: use box-shadow as focus ring (no outline offset) */
  outline: none;
  box-shadow: 0 0 0 2px transparent;
}

/* 2a - Hover/Focus/Active (no movement) */
.gamemode-layout #challenge-text-link:hover { opacity: 0.85; }
.gamemode-layout #challenge-text-link:focus,
.gamemode-layout #challenge-text-link:focus-visible {
  box-shadow: 0 0 0 2px rgba(43,108,176,0.35);
}
.gamemode-layout #challenge-text-link:active {
  transform: none !important;     /* neutralize any global button translate */
}

/* shared topbar link states (covers both Challenge + Game Modes links) */
.gamemode-topbar .text-link:hover { opacity: 0.85; }
.gamemode-topbar .text-link:focus,
.gamemode-topbar .text-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(43,108,176,0.35);
}
.gamemode-topbar .text-link:active { transform: none !important; }

/* 3 - Notification text below button */
.gamemode-layout #challenge-inline-note {
  margin: 2px 0 0;                /* sits neatly under the link, right-aligned */
  font-size: 12px;
  color: #888;
  text-align: right;
}

/* 7 - Locked / Disabled Buttons */
button.locked,
button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* 8 - Optional Challenge HUD badge (header indicator) */
.challenge-active #mode-label::after {
  content: " (Challenge)";
  color: #ff5555;
  font-weight: 600;
  font-size: 0.95em;
}

/* 9 - Blank Cards mode: hide centers */
.challenge-blank .cardflip-card-center {
  visibility: hidden;
}