/* =========================================================
   Buttons
   ========================================================= */

/* --- Primary pill (gold) --- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 13px 30px;
  border-radius: var(--r-pill);
  background: var(--img-grain), linear-gradient(180deg, #fbd489, var(--c-gold-base));
  border-bottom: 3px solid var(--c-gold-edge);
  color: var(--c-gold-text);
  font: 800 15px var(--font-body);
  box-shadow: var(--shadow-btn-rest);
  transition: transform .12s ease-out, box-shadow .12s ease-out, background .12s;
}
.btn-primary:hover:not(:disabled) {
  background: var(--img-grain), linear-gradient(180deg, #ffe3a6, #f5bd4c);
  border-bottom-color: #c47c22;
  transform: translateY(-1px);
  box-shadow: var(--shadow-btn-hover);
}
.btn-primary:active:not(:disabled) {
  background: var(--img-grain), linear-gradient(180deg, #e5a833, #f2bf52);
  border-bottom: 1px solid var(--c-gold-edge);
  padding: 14px 30px 12px;
  color: #4a2a08;
  transform: translateY(2px);
  box-shadow: var(--shadow-btn-pressed);
  transition: none;
}
.btn-primary:disabled {
  background: #c8cbb4;
  border-bottom-color: #9aa08b;
  color: #4d584c;
  opacity: .45;
  box-shadow: none;
  cursor: not-allowed;
}

/* --- Destructive pill (red) --- */
.btn-destructive {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 13px 26px;
  border-radius: var(--r-pill);
  background: var(--img-grain), linear-gradient(180deg, var(--c-red-grad-top), var(--c-red-grad-bottom));
  border-bottom: 3px solid var(--c-red-edge);
  color: #ffe9dd;
  font: 800 13px var(--font-body);
  box-shadow: var(--shadow-card-lift);
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}
.btn-destructive:hover:not(:disabled) { transform: translateY(-1px); }
.btn-destructive:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 1px; }

/* --- Destructive outline (used in Settings "Abandon voyage") --- */
.btn-destructive-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 24px;
  border-radius: var(--r-pill);
  border: 1.5px solid #e08a6e;
  background: #b02a0b26;
  color: #ffd9c9;
  font: 700 13.5px var(--font-body);
}
.btn-destructive-outline:hover { background: #b02a0b40; }

/* --- Secondary (cream hairline) --- */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 11px 26px;
  border-radius: var(--r-pill);
  background: #ffffff0f;
  border: var(--border-cream);
  color: var(--c-light);
  font: 700 14px var(--font-body);
  transition: background .12s, color .12s;
}
.btn-secondary:hover:not(:disabled) { background: #cfd7ad26; border-color: #e4ecc4; color: #fff; }
.btn-secondary:active:not(:disabled) { background: #cfd7ad40; box-shadow: inset 0 2px 5px #0000003d; }
.btn-secondary:disabled { background: #ffffff0a; opacity: .45; cursor: not-allowed; }

/* --- Tertiary (aqua text) --- */
.btn-tertiary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 11px 20px;
  border-radius: var(--r-pill);
  color: var(--c-aqua-text-1);
  font: 700 14px var(--font-body);
  transition: background .12s, color .12s;
}
.btn-tertiary:hover { background: #13a2af2e; color: #b6ecdf; }
.btn-tertiary:active { background: #13a2af4d; color: #d6f6ec; }

/* --- Icon button (48px default) --- */
.btn-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-pill);
  background: var(--img-grain), linear-gradient(170deg, #2b6f68, #174f4c);
  border: var(--border-hairline-visible);
  box-shadow: 0 4px 10px #0a2c2c66;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s ease-out, box-shadow .12s ease-out, border-color .12s;
}
.btn-icon svg { width: 22px; height: 22px; stroke: var(--c-gold-light); transition: stroke .12s; }
.btn-icon:hover:not(:disabled) {
  background: var(--img-grain), linear-gradient(170deg, #35847b, #1d5f5b);
  border-color: #f7c36480;
  box-shadow: 0 7px 16px #0a2c2c80;
  transform: translateY(-1px);
}
.btn-icon:hover:not(:disabled) svg { stroke: #ffd98a; }
.btn-icon:active:not(:disabled) {
  background: #103f3d;
  border-color: #ffffff1f;
  box-shadow: inset 0 2px 6px #00000066;
  transform: translateY(2px);
}
.btn-icon:disabled { background: #2a453f; opacity: .45; cursor: not-allowed; }

.btn-icon.is-mystical {
  background: var(--img-grain), linear-gradient(170deg, var(--c-purple), #7d4874);
  border-color: #ffffff38;
  box-shadow: 0 4px 10px #2b103166;
}
.btn-icon.is-mystical svg { stroke: #ffe7b0; }
.btn-icon.is-mystical:hover:not(:disabled) {
  background: var(--img-grain), linear-gradient(170deg, var(--c-purple-grad-top), var(--c-purple-grad-bottom));
  box-shadow: 0 7px 16px #2b103180;
}

/* Compact HUD icon button (40px) */
.btn-icon.is-hud {
  width: 40px;
  height: 40px;
  background: #0e3b3ae0;
  border: 1.5px solid #ffffff38;
}
.btn-icon.is-hud svg { width: 19px; height: 19px; }

/* Overlay/menu icon button (46px, blurred) */
.btn-icon.is-overlay {
  width: 46px;
  height: 46px;
  background: #0e3b3ab8;
  border: 1.5px solid #ffffff33;
  backdrop-filter: blur(6px);
}

/* --- Ribbon (hero CTA) --- */
.btn-ribbon {
  position: relative;
  display: inline-block;
  cursor: pointer;
  transition: transform .12s ease-out;
}
.btn-ribbon .ribbon-tail {
  position: absolute;
  top: 13px;
  width: 30px;
  height: 24px;
  background: linear-gradient(180deg, #ddd5b0, #c6bc94);
  transition: background .12s;
}
.btn-ribbon .ribbon-tail.left { left: -15px; clip-path: polygon(100% 0, 100% 100%, 0 86%, 16% 50%, 0 14%); }
.btn-ribbon .ribbon-tail.right { right: -15px; clip-path: polygon(0 0, 0 100%, 100% 86%, 84% 50%, 100% 14%); }
.btn-ribbon .ribbon-body {
  position: relative;
  padding: 14px 34px;
  background: var(--img-grain), linear-gradient(180deg, #faf6e2, #e8e1bd);
  clip-path: polygon(0 15%, 3% 0, 97% 0, 100% 15%, 100% 85%, 97% 100%, 3% 100%, 0 85%);
  box-shadow: 0 5px 14px #0a2c2c66;
  transition: background .12s, box-shadow .12s;
}
.btn-ribbon .ribbon-stitch {
  position: absolute;
  inset: 5px 10px;
  border: 1.5px dashed #a98f5f;
  border-radius: 3px;
  pointer-events: none;
  transition: border-color .12s;
}
.btn-ribbon .ribbon-label {
  position: relative;
  font: 400 27px/0.8 var(--font-display);
  color: #2b4a33;
  text-align: center;
  white-space: nowrap;
}
.btn-ribbon:hover .ribbon-tail { background: linear-gradient(180deg, #e6dfbc, #cec49d); }
.btn-ribbon:hover .ribbon-body { background: var(--img-grain), linear-gradient(180deg, #fffcec, #f0e9c6); box-shadow: 0 8px 20px #0a2c2c7a; }
.btn-ribbon:hover .ribbon-stitch { border-color: #b8792e; }
.btn-ribbon:hover { transform: translateY(-1px); }
.btn-ribbon:active .ribbon-tail { background: linear-gradient(180deg, #cdc49f, #b6ac85); }
.btn-ribbon:active .ribbon-body { background: var(--img-grain), linear-gradient(180deg, #e9e2bf, #d9d1ab); box-shadow: 0 1px 3px #0a2c2c66; }
.btn-ribbon:active .ribbon-stitch { border-color: #8d7549; }
.btn-ribbon:active .ribbon-label { color: #33503a; }
.btn-ribbon:active { transform: translateY(2px) scale(.985); }
.btn-ribbon.is-disabled { pointer-events: none; opacity: .45; }
.btn-ribbon.is-disabled .ribbon-tail { background: #b9bda6; }
.btn-ribbon.is-disabled .ribbon-body { background: #cfd2bd; box-shadow: none; }
.btn-ribbon.is-disabled .ribbon-stitch { border-color: #7e8474; }
.btn-ribbon.is-disabled .ribbon-label { color: #4d584c; }

/* Gold ribbon variant (used for "Finish" choice) */
.btn-ribbon.is-gold .ribbon-tail { background: linear-gradient(180deg, #c8a05f, #a67d3f); }
.btn-ribbon.is-gold .ribbon-body { background: var(--img-grain), linear-gradient(180deg, #fbd489, var(--c-gold-base)); }
.btn-ribbon.is-gold .ribbon-stitch { border-color: #8a5a12; }
.btn-ribbon.is-gold .ribbon-label { color: #4a2a08; }

/* =========================================================
   Panels & Cards
   ========================================================= */
.panel-night {
  border-radius: var(--r-xl);
  background: var(--img-grain), linear-gradient(170deg, var(--c-dark-panel-top), var(--c-dark-panel-bottom));
  border: var(--border-hairline);
  box-shadow: var(--shadow-panel);
}
.panel-day {
  border-radius: var(--r-xl);
  background: var(--img-grain), linear-gradient(170deg, var(--c-cream-panel-top), var(--c-cream-panel-bottom));
  border: 1.5px solid #ffffff99;
  box-shadow: var(--shadow-panel-day);
}
.panel-inner {
  border-radius: var(--r-xl);
  background: linear-gradient(170deg, var(--c-dark-inner-top), var(--c-dark-inner-bottom));
  border: var(--border-hairline);
  box-shadow: 0 10px 26px #04191947;
}
.panel-mystical {
  border-radius: var(--r-xl);
  background: var(--img-grain), linear-gradient(170deg, var(--c-purple-panel-top), var(--c-purple-panel-bottom));
  border: 1.5px solid #a763a666;
}

/* --- Modal --- */
.modal-scrim {
  position: absolute;
  inset: 0;
  background: #0a2a30d9;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.modal-scrim .grain-overlay { opacity: .4; }
.modal {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--img-grain), linear-gradient(170deg, var(--c-cream-panel-top), var(--c-cream-panel-bottom));
  border: 1.5px solid #ffffffb3;
  box-shadow: var(--shadow-modal);
}
.modal.is-mystical {
  background: var(--img-grain), linear-gradient(170deg, var(--c-purple-panel-top), var(--c-purple-panel-bottom));
  border: 1.5px solid #a763a680;
  box-shadow: var(--shadow-modal-purple);
}
.modal-header {
  padding: 16px 22px 14px;
  background: linear-gradient(180deg, var(--c-dark-panel-top), var(--c-dark-primary));
  border-bottom: 2px solid #f7c36466;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal.is-mystical .modal-header { border-bottom-color: #a763a659; }
.modal-title {
  font: 400 30px/0.9 var(--font-display);
  color: var(--c-gold-light);
}
.modal-close {
  width: 34px;
  height: 34px;
  border-radius: var(--r-pill);
  background: #ffffff1a;
  border: 1.5px solid #ffffff33;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.modal-close svg { width: 16px; height: 16px; stroke: var(--c-cream); }
.modal-close:hover { background: #ffffff2e; }
.modal-body { padding: 18px 22px 20px; }
.modal-body.is-cream-body { color: #2f4a3f; }
.modal-actions { display: flex; gap: 11px; justify-content: flex-end; margin-top: var(--sp-4); }
.modal-advisory { display: flex; gap: 11px; align-items: flex-start; margin-bottom: var(--sp-4); }
.modal-advisory svg { flex: none; margin-top: 1px; width: 26px; height: 26px; stroke: var(--c-red); }
.modal-advisory p { font: 400 13.5px/1.55 var(--font-body); color: #2f4a3f; margin: 0; }

/* =========================================================
   Mode-select card
   ========================================================= */
.mode-card {
  border-radius: var(--r-xl);
  padding: 8px 8px 13px;
  background: var(--img-grain), linear-gradient(170deg, #3a4f57, #1b2e34);
  border: 1.5px solid #ffffff1f;
  display: flex;
  flex-direction: column;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.mode-card.is-mystical {
  background: var(--img-grain), linear-gradient(170deg, var(--c-purple-panel-top), var(--c-purple-panel-bottom));
  border-color: #a763a666;
}
.mode-card.is-selected {
  background: var(--img-grain), linear-gradient(170deg, #1c5a4c, #0b2f2b);
  border-color: #f7c36466;
  box-shadow: 0 0 0 3px #f7c36429, 0 14px 30px #04191966;
}
.mode-card-art {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: var(--border-hairline-visible);
  height: 104px;
  flex: none;
}
.mode-card-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mode-card-art .grain-overlay { opacity: .45; }
.mode-card-tag {
  position: absolute;
  left: 9px;
  top: 9px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: #221a33cc;
  border: 1px solid var(--c-purple);
  font: 700 8px/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-purple-text-1);
}
.mode-card-check {
  position: absolute;
  right: 9px;
  top: 9px;
  width: 26px;
  height: 26px;
  border-radius: var(--r-pill);
  background: var(--c-gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .15s, transform .15s;
}
.mode-card.is-selected .mode-card-check { opacity: 1; transform: scale(1); }
.mode-card-check svg { width: 15px; height: 15px; stroke: var(--c-gold-text); }
.mode-card-body { padding: 13px 8px 0; display: flex; flex-direction: column; flex: 1; }
.mode-card-title { font: 400 26px/0.9 var(--font-display); color: var(--c-gold-light); }
.mode-card.is-mystical .mode-card-title,
.mode-card.is-selected .mode-card-title { color: var(--c-gold-light); }
.mode-card-desc { font: 400 11px/1.4 var(--font-body); color: var(--c-aqua-text-3); margin-top: 5px; min-height: 31px; }
.mode-card.is-mystical .mode-card-desc { color: var(--c-purple-text-2); }
.mode-card-footer { display: flex; gap: 7px; align-items: center; margin-top: auto; padding-top: 13px; }
.mode-card-add {
  flex: 1;
  padding: 9px 0;
  border-radius: var(--r-pill);
  border-bottom: 3px solid;
  text-align: center;
  font: 800 12px var(--font-body);
  transition: background .15s, color .15s;
}
.mode-card:not(.is-mystical):not(.is-selected) .mode-card-add {
  background: #ffffff14;
  border-color: #ffffff2e;
  color: var(--c-light);
}
.mode-card.is-mystical .mode-card-add {
  background: linear-gradient(180deg, var(--c-purple-grad-top), var(--c-purple-grad-bottom));
  border-color: var(--c-purple-edge);
  color: #fff4dd;
}
.mode-card.is-selected .mode-card-add {
  background: linear-gradient(180deg, #fbd489, var(--c-gold-base));
  border-color: var(--c-gold-edge);
  color: var(--c-gold-text);
}
.mode-card-info {
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  border: 1.5px solid #ffffff40;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 12px var(--font-body);
  color: var(--c-light);
  flex: none;
}
.mode-card.is-mystical .mode-card-info { border-color: var(--c-purple); color: var(--c-purple-text-1); }

/* Storm color picker (inside Storms mode card) */
.storm-picker { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.storm-swatch {
  width: 22px; height: 22px;
  border-radius: var(--r-pill);
  border: 2px solid #ffffff40;
  padding: 0;
  transition: border-color .12s, box-shadow .12s;
}
.storm-swatch.is-selected { border-color: #fff3d4; box-shadow: 0 0 0 2px #eab03c66; }
.storm-picker-label { font: 600 10px var(--font-body); color: var(--c-purple-text-2); }

/* =========================================================
   Achievement tile
   ========================================================= */
.achievement-tile {
  border-radius: var(--r-lg);
  padding: 12px;
  display: flex;
  gap: 11px;
  align-items: center;
  background: var(--img-grain), linear-gradient(170deg, var(--c-dark-panel-top), var(--c-dark-panel-bottom));
  border: 1.5px solid #f7c36459;
}
.achievement-tile.is-mystical { background: var(--img-grain), linear-gradient(170deg, var(--c-purple-panel-top), var(--c-purple-panel-bottom)); border-color: #a763a680; }
.achievement-tile.is-locked {
  background: #ffffff0a;
  border: 1.5px dashed #ffffff2b;
  opacity: .55;
}
.achievement-thumb {
  width: 54px; height: 54px;
  border-radius: var(--r-pill);
  flex: none;
  border: 2px solid var(--c-gold-light);
  box-shadow: 0 0 0 3px #f7c3642e;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b3232;
}
.achievement-thumb img { width: 100%; height: 100%; object-fit: cover; }
.achievement-tile.is-locked .achievement-thumb { border: none; box-shadow: none; }
.achievement-thumb svg { width: 22px; height: 22px; stroke: var(--c-aqua-text-4); }
.achievement-text { min-width: 0; }
.achievement-title { font: 800 12px var(--font-body); color: var(--c-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.achievement-desc { font: 400 10.5px/1.35 var(--font-body); color: var(--c-aqua-text-3); margin-top: 2px; }
.achievement-tile.is-locked .achievement-title { color: var(--c-aqua-text-3); }

/* =========================================================
   Form controls
   ========================================================= */
.toggle {
  width: 66px; height: 34px;
  border-radius: var(--r-pill);
  padding: 3px;
  cursor: pointer;
  background: #0a2f2e;
  border: 1.5px solid #ffffff2b;
  box-shadow: inset 0 2px 5px #00000040;
  transition: background .22s;
  display: inline-flex;
  align-items: center;
}
.toggle.is-on { background: var(--c-aqua); border-color: #ffffff3d; }
.toggle-knob {
  width: 28px; height: 28px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, #e8e4d3, #c8c3ac);
  box-shadow: 0 2px 5px #00000059;
  transition: transform .22s;
}
.toggle.is-on .toggle-knob { background: linear-gradient(180deg, #fff8e6, #e9dfc2); transform: translateX(30px); }

.slider { position: relative; height: 28px; display: flex; align-items: center; cursor: pointer; }
.slider-track { position: absolute; left: 0; right: 0; height: 10px; border-radius: var(--r-pill); background: #0a2f2e; box-shadow: inset 0 2px 4px #00000059; }
.slider-fill { position: absolute; left: 0; height: 10px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--c-aqua), var(--c-gold-light)); }
.slider-thumb {
  position: absolute;
  width: 26px; height: 26px;
  margin-left: -13px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, #fff8e6, #e9dfc2);
  border: 2px solid var(--c-gold-base);
  box-shadow: 0 3px 8px #00000066;
}

.dropdown { position: relative; }
.dropdown-field {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 15px;
  border-radius: var(--r-md);
  background: #ffffff12;
  border: var(--border-cream-soft);
  cursor: pointer;
}
.dropdown-field span { font: 600 13.5px var(--font-body); color: var(--c-light); }
.dropdown-field svg { width: 20px; height: 20px; stroke: var(--c-gold-light); transition: transform .2s; }
.dropdown.is-open .dropdown-field svg { transform: rotate(180deg); }
.dropdown-menu {
  position: absolute; left: 0; right: 0; top: 56px; z-index: 5;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--img-grain), linear-gradient(170deg, var(--c-dark-inner-top), var(--c-dark-inner-bottom));
  border: 1.5px solid #cfd7ad66;
  box-shadow: 0 14px 30px #04191980;
  display: none;
}
.dropdown.is-open .dropdown-menu { display: block; }
.dropdown-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 15px;
  border-bottom: 1px solid #ffffff14;
  font: 600 13px var(--font-body);
  color: var(--c-light);
  cursor: pointer;
}
.dropdown-row:last-child { border-bottom: none; }
.dropdown-row:hover { background: #ffffff0f; }
.dropdown-row svg { width: 17px; height: 17px; stroke: var(--c-gold-light); }

.text-input {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 15px;
  border-radius: var(--r-md);
  background: #ffffff0a;
  border: 1.5px solid #cfd7ad59;
}
.text-input input {
  flex: 1; background: transparent; border: 0; outline: none;
  font: 600 13.5px var(--font-body); color: #fff;
}
.text-input input::placeholder { color: #cfd7ad99; }
.text-input.is-focus { background: #ffffff12; border-color: var(--c-aqua-bright); box-shadow: 0 0 0 3px #13a2af33; }
.text-input.is-error { background: #b02a0b1a; border-color: var(--c-red); }
.text-input.is-error input { color: #ffd9c9; }

/* Swatch selector (Settings > Table surface) */
.swatch {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  border: 2px solid transparent;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}
.swatch.is-selected { border-color: var(--c-gold-light); box-shadow: 0 0 0 3px #f7c3642e; }

/* Kicker / section label */
.kicker {
  font: 700 10px var(--font-body);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-aqua-text-2);
}