/* CardFlip - Modals */

:root{
  --cardflip-modal-top:var(--siteHeaderH,48.6px);
  --cardflip-modal-bottom:var(--siteFooterH,25.2px);
  --cardflip-modal-backdrop:rgba(0,0,0,.5);
  --cardflip-modal-surface:#fff;
  --cardflip-modal-ink:#111;
  --cardflip-modal-muted:#666;
  --cardflip-modal-header:#1f1e1e;
  --cardflip-modal-radius:8px;
  --cardflip-modal-shadow:0 8px 30px rgba(0,0,0,.2);
  --cardflip-modal-z:10000;
}

html,
body{
  zoom:100%;
}

/* Modal layer: full-screen dim under the shared header/footer. */
.modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:var(--cardflip-modal-z);
  width:100%;
  height:100%;
  overflow:auto;
  background:var(--cardflip-modal-backdrop);
}

.modal-content{
  position:absolute;
  top:50%;
  left:50%;
  width:90%;
  max-width:500px;
  max-height:calc(100% - 32px);
  overflow:hidden;
  transform:translate(-50%,-50%);
  border-radius:var(--cardflip-modal-radius);
  background:var(--cardflip-modal-surface);
  box-shadow:var(--cardflip-modal-shadow);
  color:var(--cardflip-modal-ink);
  text-align:center;
}

.modal-header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 20px 10px 16px;
  background:var(--cardflip-modal-header);
  color:#fff;
  text-align:left;
}

.modal-header h2{
  margin:0;
  font-size:20px;
  font-weight:700;
}

.modal-close{
  margin-left:auto;
  color:#aaa;
  cursor:pointer;
  font-size:35px;
  line-height:1;
}

.modal-close:hover{
  color:#fff;
}

.modal-body{
  padding:20px;
  overflow:auto;
  background:#fff;
  color:#333;
}

/* Shared modal controls */
.accept-button,
.secondary-button,
.save-button,
.reset-button,
#cardflip-intro-next,
#cardflip-welcome-continue,
#cardflip-level-continue,
#cardflip-start-level-btn,
#save-deck-style,
#next-level{
  display:inline-block;
  min-width:140px;
  margin-top:15px;
  padding:10px 20px;
  border:0;
  border-radius:6px;
  background:#007bff;
  color:#fff;
  cursor:pointer;
  font-size:16px;
  transition:background-color .2s ease;
}

.accept-button:hover,
.save-button:hover,
.reset-button:hover,
#cardflip-intro-next:hover,
#cardflip-welcome-continue:hover,
#cardflip-level-continue:hover,
#cardflip-start-level-btn:hover,
#next-level:hover{
  background:#0056b3;
}

.secondary-button,
#reset-no{
  background:#1b2a49;
}

.secondary-button:hover,
#reset-no:hover{
  background:#0f1a30;
}

#save-deck-style,
#cardflip-start-level-btn{
  background:#27ae60;
}

#save-deck-style:hover,
#cardflip-start-level-btn:hover{
  background:#1e874b;
}

#cardflip-username-input,
#username-input{
  display:block;
  width:min(250px,100%);
  margin:0 auto;
  padding:10px;
  border:1px solid #ccc;
  border-radius:6px;
  font-size:16px;
  text-align:center;
}

.field-error,
#cardflip-username-error{
  display:none;
  margin-top:8px;
  color:red;
  font-size:13px;
  text-align:center;
}

.status-text.error{
  color:red;
}

.microcopy{
  margin:4px 0 12px;
  color:var(--cardflip-modal-muted);
  font-size:13px;
  line-height:1.4;
}

/* Header mode switcher */
.cardflip-mode-popover{
  position:fixed;
  z-index:12020;
  width:min(260px,calc(100vw - 24px));
  padding:10px;
  border:1px solid rgba(138,178,255,.32);
  border-radius:8px;
  background:rgba(8,13,24,.97);
  box-shadow:0 14px 32px rgba(0,0,0,.36);
  color:#fff;
  text-align:left;
}

.cardflip-mode-popover[hidden]{
  display:none!important;
}

.cardflip-mode-popover-title{
  margin:2px 4px 8px;
  color:#aeb9ca;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.cardflip-mode-popover-group{
  display:grid;
  gap:6px;
}

.cardflip-mode-popover-group + .cardflip-mode-popover-title{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.12);
}

.cardflip-mode-option{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:34px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:6px;
  background:rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
  font:inherit;
  font-size:13px;
  line-height:1.15;
  text-align:left;
}

.cardflip-mode-option:hover,
.cardflip-mode-option:focus-visible{
  border-color:rgba(86,170,255,.75);
  background:rgba(86,170,255,.18);
  outline:0;
}

.cardflip-mode-option.is-active::after{
  content:"Active";
  color:#7bdcff;
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* Settings modal layout */
#modal.settings-modal-wrapper .modal-content{
  max-width:550px;
}

#modal.settings-modal-wrapper .modal-body{
  padding:0!important;
}

#modal.settings-modal-wrapper .modal-body.settings-layout{
  display:flex;
  min-height:300px;
  overflow:hidden;
  background:#fff;
}

#modal.settings-modal-wrapper .modal-settingsidebar{
  width:150px;
  flex:0 0 150px;
  border-right:1px solid rgba(0,0,0,.15);
  background:#2c3e50;
  color:#fff;
}

#modal.settings-modal-wrapper .modal-settingsidebar ul{
  margin:0;
  padding:0;
  list-style:none;
}

#modal.settings-modal-wrapper .modal-settingsidebar li{
  padding:12px 16px;
  border-bottom:1px solid #34495e;
  cursor:pointer;
  font-size:16px;
  text-align:left;
  text-indent:4px;
  transition:background .2s ease;
}

#modal.settings-modal-wrapper .modal-settingsidebar li:hover,
#modal.settings-modal-wrapper .modal-settingsidebar li.active{
  background:#34495e;
  color:#fff;
}

#modal.settings-modal-wrapper .modal-settingscontent{
  flex:1;
  min-width:0;
  margin-top:0;
  padding:20px;
  overflow-y:auto;
  color:#333;
  overflow-wrap:break-word;
  text-align:left;
  word-wrap:break-word;
}

.slider-row{
  display:flex;
  flex-direction:column;
  margin-bottom:clamp(8px,2vw,20px);
  padding-inline:clamp(8px,2vw,24px);
}

.volume-label{
  display:flex;
  justify-content:space-between;
  margin-bottom:clamp(4px,1vw,10px);
  color:#2c2c2c;
  font-size:clamp(14px,1.8vw,16px);
}

.volume-label .volume-value{
  margin-left:8px;
  color:#4f4f4f;
  font-size:clamp(14px,1.8vw,16px);
  font-weight:700;
}

.slider-row input[type="range"]{
  width:100%;
  height:clamp(4px,1.2vw,80px);
  margin-top:clamp(2px,.5vw,4px);
  border-radius:5px;
  accent-color:#8b4513;
  background:#ddd;
  cursor:pointer;
  outline:none;
}

.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:2px solid #29333b;
  border-radius:20%;
  background:#29333b;
  cursor:pointer;
}

.account-row{
  display:flex;
  align-items:center;
  gap:10px;
}

.account-row #username-input{
  margin:0;
  text-align:left;
}

.reset-options,
.about-wrap{
  display:grid;
  gap:10px;
}

.reset-title{
  margin:0 0 4px;
  color:#333;
  font-weight:700;
}

/* Deck style modal */
#deck-styles-modal .modal-content{
  max-width:500px;
}

#deck-styles-modal .modal-body{
  margin:0;
  padding:0;
  overflow:hidden;
}

#deck-styles-modal .modal-close{
  display:none!important;
}

#deck-styles-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(90px,1fr));
  justify-content:center;
  gap:12px;
  max-height:300px;
  padding:12px;
  overflow-y:auto;
}

#deck-styles-grid::-webkit-scrollbar{
  width:10px;
}

#deck-styles-grid::-webkit-scrollbar-thumb{
  border-radius:6px;
  background:rgba(0,0,0,.3);
}

#deck-styles-grid::-webkit-scrollbar-track{
  background:transparent;
}

.deck-option{
  width:90px;
  height:120px;
  display:inline-block;
  margin:0 auto;
  border:2px solid #000;
  border-radius:8px;
  background-position:center;
  background-repeat:no-repeat;
  background-size:120%;
  cursor:pointer;
  transition:transform .2s ease-in-out;
}

.deck-option:hover{
  transform:scale(1.2);
}

.deck-option.selected{
  border:4px solid #c8f902;
}

.deck-option.locked{
  opacity:.6;
  filter:grayscale(100%);
  cursor:not-allowed;
}

#save-deck-style{
  display:block;
  margin:5px auto 24px;
  padding:12px;
  border:0;
  color:#fff;
  cursor:pointer;
}

.deck-save-text{
  margin:12px 0 4px;
  color:#4d4b4b;
  font-size:18px;
  font-weight:700;
  text-align:center;
}

.deck-info-text{
  margin:12px 0;
  color:#888;
  font-size:14px;
  text-align:center;
}

/* Level and completion modals */
#cardflip-level-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:10px;
  margin:14px 0;
}

.cardflip-level-btn{
  display:flex;
  min-height:72px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:12px;
  border:1px solid #d7d7d7;
  border-radius:8px;
  background:#f7f7f7;
  color:#222;
  cursor:pointer;
  font-weight:700;
}

.cardflip-level-btn span{
  color:#666;
  font-size:12px;
  font-weight:600;
}

.cardflip-level-btn:hover,
.cardflip-level-btn.selected{
  border-color:#27ae60;
  background:#eef9f0;
}

.level-select-note,
#cardflip-level-feedback-text{
  color:#333;
  font-size:15px;
  line-height:1.4;
}

#cardflip-level-feedback-text{
  white-space:pre-line;
}

.locked-levels-wrap,
.locked-actions{
  display:grid;
  gap:12px;
  justify-items:center;
}

/* Reset and confirm modals */
.reset-content p{
  margin:0 0 10px;
  color:#333;
  font-size:16px;
  text-align:center;
}

.reset-buttons{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:20px;
}

.reset-buttons button{
  min-width:50px;
  margin-top:-6px;
  padding:10px 20px;
  border:0;
  border-radius:5px;
  color:#fff;
  cursor:pointer;
  font-size:16px;
  transition:background-color .2s ease-in-out;
}

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

/* Welcome modal */
#cardflip-welcome-modal{
  overflow:hidden;
  background:transparent;
}

#cardflip-welcome-modal .cardflip-welcome-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  pointer-events:auto;
}

#cardflip-welcome-modal .cardflip-welcome-shell,
#cardflip-welcome-modal .modal-content{
  position:absolute;
  top:50%;
  left:50%;
  width:90%;
  max-width:500px;
  min-height:375px;
  overflow:hidden;
  transform:translate(-50%,-50%);
  border-radius:var(--cardflip-modal-radius);
  background:#fff;
  box-shadow:var(--cardflip-modal-shadow);
  color:#111;
  isolation:isolate;
  pointer-events:auto;
  text-align:center;
}

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

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

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

#cardflip-welcome-continue{
  margin-top:155px;
}

#cardflip-welcome-modal .modal-floating-character{
  position:absolute;
  top:6px;
  right:12px;
  z-index:2;
  width:96px;
  pointer-events:none;
}

#cardflip-welcome-modal .modal-floating-character img{
  display:block;
  width:auto;
  max-height:300px;
}

/* Stats modals */
.stats-modal .modal-content{
  width:450px;
  max-width:90vw;
  height:520px;
}

.stats-modal .modal-body{
  position:relative;
  min-height:440px;
  padding-top:8px!important;
}

.stats-layout{
  position:relative;
  display:flex;
  flex-direction:column;
  margin-top:0;
  padding-top:0;
}

.stats-content{
  position:relative;
  z-index:1;
  flex:1;
  padding:20px;
  border-radius:8px;
  color:#444;
  font-size:16px;
  line-height:1.5;
  pointer-events:auto;
  text-align:left;
}

.stats-content p{
  margin: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;
  width:40px;
  height:40px;
  place-items:center;
  border:0;
  border-radius:6px;
  background:#e7e7e7;
  color:#111;
  cursor:pointer;
}

.stats-chevron:hover{
  background:#d7d7d7;
}

.stats-label{
  color:#222;
  font-size:16px;
  font-weight:700;
  text-align:center;
}

.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;
}

.stats-mode-wrap{
  display:grid;
  gap:14px;
}

.stats-mode-levels h4{
  margin:0 0 8px;
  color:#222;
}

.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;
  border-radius:6px;
  background:#f6f6f6;
}

.level-best .lb-label{
  color:#555;
}

.level-best .lb-value{
  color:#111;
  font-weight:600;
}

.stats-gif-container,
.stats-character{
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:0;
  max-width:clamp(100px,30vw,150px);
  height:auto;
  margin-bottom:0!important;
  opacity:.9;
  pointer-events:none;
}

.stats-gif{
  display:block;
  max-width:100%;
  height:auto;
}

.challenge-stats-modal .modal-body{
  padding:16px;
}

.challenge-stats .grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

/* Game mode and challenge mode modals */
#modal.game-mode-modal .modal-content,
#modal.challenge-mode-modal .modal-content{
  width:92%;
  max-width:500px;
  border-radius:10px;
  background:#0f1720;
  box-shadow:0 10px 40px rgba(0,0,0,.55);
}

#modal.game-mode-modal .modal-header,
#modal.challenge-mode-modal .modal-header{
  padding:12px 20px;
}

#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;
}

#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;
}

#modal.game-mode-modal .text-link,
#modal.challenge-mode-modal .text-link{
  padding:0;
  border:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
  font:inherit;
  text-decoration:underline;
}

#modal.game-mode-modal .challenge-note,
#modal.challenge-mode-modal .challenge-note{
  min-height:18px;
  font-size:13px;
  opacity:.85;
}

#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;
}

#modal.game-mode-modal .gamemode-card,
#modal.challenge-mode-modal .gamemode-card{
  display:flex;
  width:100%;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:6px;
  padding:14px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:10px;
  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;
}

#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;
  line-height:1.2;
  opacity:.9;
}

#modal.game-mode-modal .gm-preview,
#modal.challenge-mode-modal .gm-preview{
  margin-top:auto;
  font-size:13px;
  letter-spacing:.2px;
  line-height:1.2;
  opacity:.95;
}

#modal.game-mode-modal .gamemode-actions,
#modal.challenge-mode-modal .gamemode-actions{
  display:flex;
  justify-content:flex-start;
  width:100%;
  margin:6px 0 8px;
}

#modal.game-mode-modal .gamemode-note,
#modal.challenge-mode-modal .gamemode-note{
  margin:0;
  font-size:13px;
  opacity:.85;
}

/* Legacy win modal target */
#win-modal .modal-content{
  max-width:420px;
  padding:22px;
}

#win-message{
  margin:0;
  color:#111;
  font-size:18px;
  font-weight:700;
}