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

/* SECTION 2: MODAL HEADER */
.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  background-color: #1f1e1e; padding: 10px 20px 10px 16px;
}
.modal-header h2 { margin: 0; font-size: 18px; font-weight: bold; }
.modal-close {
  display: none; color: #aaa; font-size: 32px; font-weight: bold;
  cursor: pointer; margin-left: 20px;
}
.modal-close:hover, .modal-close:focus { color: #333; }

/* SECTION 3: MODAL BODY (DEFAULT) */
.modal-body { padding: 20px; }

/* SECTION 4: SETTINGS MODAL WRAPPER & BODY */
.modal.settings-modal-wrapper .modal-content {
  max-width: 550px; margin: auto; left: 50%; top: 50%;
  transform: translate(-50%, -50%); position: fixed; background: #fff; border-radius: 8px;
}
.modal.settings-modal-wrapper .modal-body { padding: 0 !important; }

/* SECTION 5: SETTINGS LAYOUT (SIDEBAR + CONTENT) */
.modal-body.settings-layout {
  display: flex; min-height: 300px; background-color: #fff; border-radius: 0; overflow: hidden;
}
.modal-settingsidebar { width: 150px; background-color: #2c3e50; color: #fff; }
.modal-settingsidebar ul { list-style: none; margin: 0; padding: 0; }
.modal-settingsidebar li {
  padding: 12px 16px; text-indent: 10px; border-bottom: 1px solid #34495e;
  cursor: pointer; font-size: 16px; transition: background 0.2s ease;
}
.modal-settingsidebar li:hover { background-color: #34495e; }
.modal-settingscontent {
  flex: 1; overflow-y: auto; color: #333; justify-content: center; margin-top: 0;
  padding: clamp(8px, 4vw, 20px); word-wrap: break-word; overflow-wrap: break-word;
}

/* SECTION 6: 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 7: CARD STYLE STATUS LISTS */
#card-style-status h3 { margin-top: 16px; font-size: 18px; color: black; }
#card-style-status ul { list-style-type: none; padding: 0; margin-bottom: 12px; color: black; }
#card-style-status li { padding: 4px 0; color: black; }
#unlocked-deck-list, #locked-deck-list { color: black; font-weight: 500; margin-left: 10px; }
#settings-content h3 { color: #333; }
#unlocked-deck-list li, #locked-deck-list li { color: #333; font-weight: normal; }
.deck-list-group { color: #333; font-size: 16px; line-height: 1.5; }
.deck-list-group ul { list-style: disc; padding-left: 20px; }
.deck-list-group li { color: #333 !important; }

/* SECTION 8: RESET CONFIRM CONTENT */
.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;
}
.reset-buttons button:hover { background-color: #0056b3; }
#reset-no { background-color: #1B2A49; }
#reset-no:hover { background-color: #0F1A30; }

/* SECTION 9: INTRODUCTION MODAL */
#introduction-modal .modal-content {
  background-color: #fff; padding: 30px; border-radius: 12px; width: 500px; max-width: 90%;
  text-align: center; box-shadow: 0 8px 30px rgba(0,0,0,.2);
}
#introduction-modal .modal-header h2 { margin-top: 0; font-size: 24px; color: #2c3e50; }
#introduction-modal .modal-body p { font-size: 16px; color: #555; margin-bottom: 20px; }
#intro-next {
  padding: 10px 20px; font-size: 16px; background-color: #27ae60; color: #fff;
  border: none; border-radius: 6px; cursor: pointer; transition: background-color .2s ease;
}
#intro-next:hover { background-color: #219150; }

/* SECTION 10: DECK STYLES MODAL */
#deck-styles-modal .modal-content {
  padding: 0; margin: auto; left: 50%; top: 50%;
  transform: translate(-50%, -50%); position: fixed; background: #fff; border-radius: 8px;
}
#deck-styles-modal .modal-body { padding: 0; margin: 0; overflow: hidden; }
#deck-styles-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  justify-content: center; column-gap: 12px; row-gap: 12px; padding: 12px;
  max-height: 260px; overflow-y: auto; box-sizing: border-box;
}
#deck-styles-grid::-webkit-scrollbar { width: 10px; }
#deck-styles-grid::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,.2); 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; background: #27ae60;
  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-top: 12px; margin-bottom: 12px;
}

/* SECTION 11: WIN MODAL */
#win-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: rgba(0,0,0,.8); padding: 20px; text-align: center; z-index: 10001;
  min-height: 80vh; color: black;
}
#win-modal h2 { color: black; margin-top: 18px; }
#win-modal p { color: black; margin-top: 5px; }
#video-container {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; text-align: center;
}
#win-ad-video { display: block; max-width: 100%; margin: 15px auto; }
#ad-wait-text { font-size: 14px; color: gray; }
#spin-card {
  width: 180px; height: 260px; border-radius: 12px; background-color: #eee;
  display: flex; align-items: center; justify-content: center;
  font-size: 64px; font-weight: bold; background-repeat: no-repeat;
  background-position: center center; background-size: 120%;
  box-shadow: 0 4px 20px rgba(0,0,0,.3); margin: 20px auto;
}
#spin-question {
  position: absolute; font-size: 64px; font-weight: bold; left: 50%;
  transform: translateX(-50%); animation: question-spin 2.5s ease-in-out forwards;
}
@keyframes question-spin {
  0% { transform: rotate(0deg); opacity: 1; }
  90% { transform: rotate(720deg); opacity: 0; }
  100% { opacity: 0; }
}
@keyframes spin-reveal {
  0% { background-color: #eee; transform: rotateY(0deg); }
  100% { background-color: #eee; transform: rotateY(1080deg); }
}
.spin-animation { animation: spin-reveal 4s ease-in-out forwards; }
#next-step-btn {
  padding: 10px 20px; font-size: 16px; background-color: #ccc; color: #fff;
  border: none; border-radius: 6px; cursor: not-allowed; transition: background-color .3s ease-in-out;
  display: block; margin-top: 15px; margin-bottom: 15px;
}
#next-step-btn.enabled { background-color: #27ae60; cursor: pointer; }
#next-step-btn.enabled:hover { background-color: #219150; }

/* SECTION 12: SETTINGS BUTTON (HEADER ICON) */
#settings-btn { background: none; border: none; cursor: pointer; padding: 0; }
#settings-icon { fill: white; transition: fill .2s ease-in-out; }
#settings-btn:hover #settings-icon { fill: #f39c12; }

/* SECTION 13: NEXT GAME BUTTON */
#next-game-btn {
  padding: 10px 20px; font-size: 16px; background-color: #27ae60; color: #fff;
  border: none; border-radius: 6px; cursor: pointer; margin-top: 15px; margin-bottom: 15px;
}
#next-game-btn:hover { background-color: #219150; }
#next-game-btn:disabled { opacity: .5; cursor: not-allowed; }

/* SECTION 14: STATS MODAL */
.stats-modal .modal-content {
  width: 450px; max-width: 90vw; margin: auto; left: 50%; top: 50%;
  transform: translate(-50%, -50%); position: fixed; background: #fff; border-radius: 8px;
}
.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-top: 0 !important; margin-bottom: 0 !important; }
.stats-image { flex-shrink: 0; }
.stats-character {
  position: absolute; bottom: 10px; right: 10px; max-width: clamp(100px, 30vw, 150px); height: auto; margin-bottom: 0 !important;
}
.stats-row { font-size: 16px; margin-bottom: 10px; }
.stats-row .label { color: #333; }
.stats-row .value { font-weight: bold; margin-left: 6px; }
.all-unlocked-message { text-align: center; font-size: 18px; color: #27ae60; padding: 20px; }

/* SECTION 15: RESETGAME / WELCOME MODALS */
.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; }
.modal.welcome-modal .modal-content {
  max-width: 450px; margin: auto; left: 50%; top: 50%;
  transform: translate(-50%, -50%); position: fixed; background: #fff; border-radius: 8px;
}

/* SECTION 16: INTRO NAME INPUT */
#playerNameInput {
  font-size: 22px; padding: 0; width: 80%; max-width: 400px; margin: 10px auto; display: block;
  border-radius: 8px; border: 2px solid #ccc; text-align: center;
}

/* SECTION 17: RESET OPTIONS PANEL */
.reset-options {
  display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 0;
}
.reset-title {
  text-align: center; font-size: 18px; font-weight: bold; color: #333; margin-bottom: 0;
}
.reset-button {
  padding: 10px 18px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer;
  background-color: #f0f0f0; color: #333; transition: background-color .2s ease;
  width: 240px; max-width: 90%; text-align: center;
}
.reset-button:hover { background-color: #ddd; }

/* SECTION 18: GENERIC MODAL MENUS */
.modal-menu ul { list-style: none; margin: 0; padding: 0; }
.modal-menu li { padding: 12px 16px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.1); }
.modal-menu li:hover { background-color: #2e465c; }
.modal-main { flex: 1; padding: 24px; background-color: #f9f9f9; }

/* SECTION 19: SETTINGS TAB HOVER/ACTIVE */
.settings-tab:hover, .settings-tab.active { background-color: #34495e; color: white; }
.modal-settingsidebar li { padding: 10px; cursor: pointer; transition: background-color .2s ease; }
.modal-settingsidebar li:hover, .modal-settingsidebar li.active { background-color: #34495e; color: white; }

/* SECTION 20: RESPONSIVE */
@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; }
}