.variant-ui-overlay{
  position:fixed;
  inset:0;
  /* Pickers can open from the Display or Feedback modal, so this layer must sit above both. */
  z-index:20000;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(3px)
}
.variant-ui-dialog{
  width:min(520px,100%);
  max-height:min(82dvh,680px);
  overflow:auto;
  box-sizing:border-box;
  border:1px solid #4d4637;
  border-radius:14px;
  background:linear-gradient(145deg,#171814,#0f100f);
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  padding:16px;
  color:#ded4bf
}

.variant-ui-picker-dialog{
  display:flex;
  flex-direction:column;
  overflow:hidden
}
.variant-ui-picker-dialog .variant-ui-choice-scroll{
  min-height:0;
  flex:1 1 auto;
  overflow:hidden
}
.variant-ui-picker-dialog .variant-ui-choice-list{
  height:100%;
  max-height:min(56dvh,520px);
  padding-right:8px;
  scrollbar-gutter:auto
}
.variant-ui-picker-dialog .variant-ui-actions{
  flex:0 0 auto
}
.variant-ui-title{
  margin:0 0 7px;
  color:#f0d49c;
  font-size:18px;
  font-weight:800
}
.variant-ui-message{
  margin:0;
  color:#a99e88;
  line-height:1.5;
  white-space:pre-wrap
}
.variant-ui-field{
  width:100%;
  box-sizing:border-box;
  margin-top:12px;
  border:1px solid #3d4139;
  border-radius:9px;
  background:#0c0e0c;
  color:#eee2ca;
  padding:10px 11px;
  outline:none;
  font:inherit
}
.variant-ui-field:focus{
  border-color:#8b7137;
  box-shadow:0 0 0 2px rgba(200,167,89,.10)
}
textarea.variant-ui-field{
  min-height:120px;
  resize:vertical
}
.variant-ui-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
  margin-top:15px
}
.variant-ui-btn{
  border:1px solid #393c35;
  border-radius:8px;
  background:#121412;
  color:#c9bca2;
  padding:8px 12px;
  cursor:pointer;
  font-weight:750
}
.variant-ui-btn.primary{
  border-color:#765f2f;
  background:#211a0e;
  color:#f0cf89
}
.variant-ui-btn.danger{
  border-color:#70403a;
  background:#1c1110;
  color:#efaaa1
}
.variant-ui-choice-scroll{
  position:relative;
  margin-top:12px
}
.variant-ui-choice-list{
  display:grid;
  gap:7px;
  max-height:min(56dvh,520px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-right:16px;
  scrollbar-width:thin;
  scrollbar-color:#6e592c #0d0f0d;
  scrollbar-gutter:stable;
  color-scheme:dark
}
.variant-ui-choice-list::-webkit-scrollbar{
  width:9px
}
.variant-ui-choice-list::-webkit-scrollbar-track{
  background:#0d0f0d;
  border-radius:999px
}
.variant-ui-choice-list::-webkit-scrollbar-thumb{
  background:#6e592c;
  border:2px solid #0d0f0d;
  border-radius:999px
}
.variant-ui-choice-group{
  margin:9px 2px 1px;
  color:#8f8063;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase
}
.variant-ui-choice{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-align:left;
  border:1px solid #343830;
  border-radius:9px;
  background:#101210;
  color:#d9ccb5;
  padding:10px 11px;
  cursor:pointer;
  font:inherit
}
.variant-ui-choice:hover,.variant-ui-choice:focus{
  border-color:#765f2f;
  background:#1b1810;
  color:#f0d49c
}
.variant-ui-choice.current{
  border-color:#82682f;
  background:#201a0f;
  color:#f3d694
}
.variant-ui-choice.danger{
  border-color:#643a35;
  color:#efaaa1;
  background:#18100f
}
.variant-ui-choice:disabled{
  position:relative;
  opacity:.34;
  cursor:not-allowed;
  border-color:#292b27;
  background:#0d0f0d;
  color:#777268
}
.variant-ui-choice:disabled:hover,.variant-ui-choice:disabled:focus{
  border-color:#4a2927;
  background:#0d0f0d;
  color:#777268;
  cursor:not-allowed
}
.variant-ui-choice:disabled:hover::after{
  content:'⊘';
  position:absolute;
  right:11px;
  top:50%;
  transform:translateY(-50%);
  color:#d75d55;
  font-size:18px;
  font-weight:900;
  line-height:1
}
.variant-ui-check{
  color:#cfa754;
  font-weight:900;
  flex:0 0 auto
}
.variant-mobile-select-trigger{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
  min-height:40px;
  box-sizing:border-box;
  border:1px solid #343830;
  border-radius:8px;
  background:#111310;
  color:#dfd2ba;
  padding:7px 9px;
  text-align:left;
  font:inherit;
  font-size:14px;
  cursor:pointer;
  overflow:hidden
}
.variant-mobile-select-trigger::after{
  content:'▾';
  color:#b59658;
  font-size:12px;
  flex:0 0 auto
}
.variant-mobile-select-trigger:disabled{
  opacity:.5;
  cursor:not-allowed
}
.variant-mobile-select-trigger-text{
  min-width:0;
  flex:1 1 auto;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
html.mobile-ui select.variant-mobile-select-source,select.variant-picker-always{
  display:none!important
}
html.mobile-ui .variant-mobile-select-trigger,.variant-mobile-select-trigger.variant-picker-always-trigger{
  display:inline-flex;
  width:100%
}
input[type="checkbox"]{
  appearance:none!important;
  -webkit-appearance:none!important;
  width:17px!important;
  height:17px!important;
  min-width:17px!important;
  flex:0 0 17px;
  margin:0;
  border:1px solid #5a513d!important;
  border-radius:4px!important;
  background-color:#0c0e0c!important;
  background-repeat:no-repeat;
  background-position:center;
  background-size:12px 12px;
  vertical-align:middle;
  cursor:pointer;
  color-scheme:dark
}
input[type="checkbox"]:hover{
  border-color:#8d7440!important;
  background-color:#12140f!important
}
input[type="checkbox"]:checked{
  border-color:#b4934d!important;
  background-color:#745b25!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23fff1c8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
}
input[type="checkbox"]:focus-visible{
  outline:2px solid #b4934d;
  outline-offset:2px
}
input[type="checkbox"]:disabled{
  opacity:.45;
  cursor:not-allowed
}
.variant-ui-toast-host{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:5100;
  display:grid;
  gap:8px;
  max-width:min(420px,calc(100vw - 32px));
  pointer-events:none
}
.variant-ui-toast{
  border:1px solid #3a3e36;
  border-left:3px solid #b28a3e;
  border-radius:10px;
  background:#131512;
  color:#d6cab3;
  padding:10px 12px;
  box-shadow:0 10px 35px rgba(0,0,0,.38);
  line-height:1.4;
  pointer-events:auto;
  animation:variantToastIn .16s ease-out
}
.variant-ui-toast.error{
  border-left-color:#b76156
}
.variant-ui-toast.success{
  border-left-color:#758b58
}
.variant-ui-toast.info{
  border-left-color:#6d7f9d
}
@keyframes variantToastIn{
  from{
    opacity:0;
    transform:translateY(6px)
  }
  to{
    opacity:1;
    transform:translateY(0)
  }
}
@media(max-width:820px){
  .variant-ui-overlay{
    padding:12px;
    align-items:end
  }
  .variant-ui-dialog{
    max-height:88dvh;
    border-radius:14px 14px 10px 10px;
    padding-bottom:calc(16px + env(safe-area-inset-bottom))
  }
  .variant-ui-picker-dialog{
    overflow:hidden
  }
  .variant-ui-picker-dialog .variant-ui-choice-list{
    max-height:62dvh
  }
  .variant-ui-choice{
    min-height:44px
  }
  .variant-ui-toast-host{
    left:10px;
    right:10px;
    bottom:calc(10px + env(safe-area-inset-bottom));
    max-width:none
  }
}


/* The calculator is a small site-wide utility, so it stays available regardless of the active game or tool. */
.header-calculator-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:6px 10px;
  margin-left:10px;
  border:1px solid #51452d;
  border-radius:8px;
  background:#15130f;
  color:#d9c39a;
  font:700 12px/1 inherit;
  cursor:pointer;
  white-space:nowrap;
}
.header-calculator-btn:hover { background:#211d15; border-color:#806629; color:#f0d49c; }
.header-calculator-short { display:none; }

body.variant-calculator-open { overflow:hidden; }
.variant-calculator-backdrop {
  position:fixed;
  inset:0;
  z-index:5000;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(3px);
}
.variant-calculator-backdrop[hidden] { display:none; }
.variant-calculator {
  width:min(340px, 100%);
  border:1px solid #4b402b;
  border-radius:14px;
  background:linear-gradient(145deg,#171611,#0d0e0d);
  color:#d9c9aa;
  box-shadow:0 24px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.03);
  padding:14px;
}
.variant-calculator-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.variant-calculator-title { color:#f0d49c; font-size:18px; font-weight:800; letter-spacing:.02em; }
.variant-calculator-head small,
.variant-calculator-hint { color:#817761; font-size:10px; line-height:1.45; }
.variant-calculator-close {
  width:34px;
  height:34px;
  border:1px solid #3d382e;
  border-radius:8px;
  background:#121212;
  color:#c9b89a;
  font-size:20px;
  cursor:pointer;
}
.variant-calculator-screen {
  min-height:82px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:flex-end;
  gap:5px;
  padding:12px;
  margin-bottom:10px;
  overflow:hidden;
  border:1px solid #373126;
  border-radius:10px;
  background:#090a09;
}
.variant-calculator-expression {
  width:100%;
  overflow:hidden;
  color:#9c9078;
  font-size:14px;
  text-align:right;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.variant-calculator-result {
  width:100%;
  overflow:hidden;
  color:#f0d49c;
  font-size:28px;
  font-weight:800;
  text-align:right;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.variant-calculator-keys {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
}
.variant-calculator-keys button {
  min-height:48px;
  border:1px solid #35322b;
  border-radius:9px;
  background:#171817;
  color:#ddd0b6;
  font:800 16px/1 inherit;
  cursor:pointer;
}
.variant-calculator-keys button:hover { background:#20211f; border-color:#554b37; }
.variant-calculator-keys .operator { color:#f0d49c; background:#211b10; border-color:#58451f; }
.variant-calculator-keys .equals {
  grid-column:1 / -1;
  background:#33250e;
  border-color:#806629;
  color:#f5d99e;
}
.variant-calculator-hint { margin-top:10px; text-align:center; }

@media (max-width:820px) {
  .header-calculator-btn { min-height:32px; margin-left:auto; padding:5px 8px; border-radius:7px; }
}
@media (max-width:560px) {
  .header-calculator-label { display:none; }
  .header-calculator-short { display:inline; }
  .header-calculator-btn { min-width:38px; padding:5px 7px; }
}

/* Feedback stays easy to find without crowding the rest of the navigation. */
.nav-credit-links {
  line-height: 1.55;
}

.nav-feedback-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(180px, 100%);
  min-height: 32px;
  margin: 8px auto 0;
  padding: 6px 12px;
  border: 1px solid rgba(215, 169, 93, .28);
  border-radius: 8px;
  background: rgba(215, 169, 93, .07);
  color: #d7c08e;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.variant-feedback-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100dvh;
  box-sizing: border-box;
  padding: 18px;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(7px);
}

.variant-feedback-overlay[hidden] {
  display: none;
}

.variant-feedback-dialog {
  width: min(620px, calc(100vw - 36px));
  max-height: min(86dvh, 780px);
  margin: auto;
  overflow: auto;
  border: 1px solid rgba(215, 169, 93, .28);
  border-radius: 14px;
  background: #11120f;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
}

.variant-feedback-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.variant-feedback-head h2 {
  margin: 2px 0 4px;
  color: #eee6d7;
  font-size: 20px;
}

.variant-feedback-head p {
  margin: 0;
  color: #8f8a81;
  font-size: 12px;
  line-height: 1.45;
}

.variant-feedback-close {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
  color: #c9c2b6;
  font-size: 20px;
  cursor: pointer;
}

.variant-feedback-form {
  display: grid;
  gap: 12px;
  padding: 16px 18px 18px;
}

.variant-feedback-field {
  display: grid;
  gap: 6px;
}

.variant-feedback-field > span {
  color: #d5ccbd;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.variant-feedback-field input,
.variant-feedback-field select,
.variant-feedback-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  background: #0b0c0a;
  color: #e6e0d5;
  font: inherit;
}

.variant-feedback-field input,
.variant-feedback-field select {
  min-height: 40px;
  padding: 8px 10px;
}

.variant-feedback-field textarea {
  min-height: 150px;
  resize: vertical;
  padding: 10px;
  line-height: 1.45;
}

.variant-feedback-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.variant-feedback-context,
.variant-feedback-note,
.variant-feedback-status {
  color: #888278;
  font-size: 11px;
  line-height: 1.45;
}

.variant-feedback-context b {
  color: #bbb2a4;
}

.variant-feedback-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.variant-feedback-status {
  min-height: 16px;
  margin-right: auto;
}

.variant-feedback-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

@media (max-width: 620px) {
  .variant-feedback-overlay {
    align-items: center;
    justify-content: center;
    padding: 12px;
  }

  .variant-feedback-dialog {
    width: min(100%, 620px);
    max-height: 92dvh;
    border-radius: 14px;
  }

  .variant-feedback-contact-grid {
    grid-template-columns: 1fr;
  }

  .variant-feedback-actions {
    flex-wrap: wrap;
  }

  .variant-feedback-actions .vbtn {
    flex: 1 1 140px;
  }
}


/* Feedback type uses Variant's themed picker on desktop too so Opera/Windows never opens a white native menu. */
.variant-feedback-field > .variant-mobile-select-trigger.variant-picker-always-trigger{
  width:100%;
  min-height:40px;
  box-sizing:border-box;
  border-color:rgba(255,255,255,.1);
  background:#0b0c0a;
  color:#e6e0d5;
}
/* Keep unsaved progress visible until saving succeeds. */
.storage-recovery {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 100000;
    max-width: 480px;
    padding: 16px;
    border: 1px solid #dba66b;
    border-radius: 10px;
    background: #261f19;
    color: #fff0d8;
    box-shadow: 0 6px 24px #0008;
}

.storage-recovery p {
    margin: 0 0 12px;
    line-height: 1.5;
}

.storage-recovery button {
    min-height: 44px;
    margin: 4px 8px 0 0;
    padding: 8px 12px;
    border: 1px solid #dba66b;
    border-radius: 6px;
    background: #35291d;
    color: inherit;
    cursor: pointer;
}

@media (max-width: 540px) {
    .storage-recovery {
        right: 12px;
        bottom: 12px;
        left: 12px;
    }
}