/* === Fonts === */
/* Fonts are self-hosted via ./assets/fonts/fonts.css */

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%);
  backdrop-filter: blur(4px);
  pointer-events: none;
}

/* === Base === */
:root {
  --tw-shadow-color: 0 0 0 / 0.25;
  --panel-bg-base: #1e1a16;
  --panel-bg-gradient: linear-gradient(to bottom, #13100e, #0f0d0c);
  --panel-bg-gradient-dark: linear-gradient(to bottom, #13100e, #0f0d0c);
  --border-gold: #c5a059;
  --border-gold-dark: #8a703e;
  --border-bronze: #5c4d3c;
  --border-shadow: #000000;
  --bg-glass: rgba(22, 19, 17, 0.95);
}

html {
  font-family: Lato, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

.text-merri {
  font-family: Merriweather, serif;
}

.text-lato {
  font-family: Lato, sans-serif;
}

.text-inter {
  font-family: Inter, sans-serif;
}

.text-cinzel {
  font-family: "Cinzel", serif;
}

.text-imfell {
  font-family: "IM Fell English";
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.text-up {
  text-transform: uppercase;
}

.text-b {
  font-weight: 700 !important
}

.text-n {
  font-weight: 400 !important
}

.ls-1 {
  letter-spacing: 1px;
}

.lh-0 {
  line-height: 0 !important;
}

.lh-1 {
  line-height: 1 !important
}

.text-btn {
  background: transparent !important;
  border: none !important;
  font-family: Lato !important;
}

.text-btn:hover {
  background: transparent !important;
  border: none !important
}

.sw {}

.ta-left {
  text-align: left;
}

.ta-center {
  text-align: center;
}

.ta-right {
  text-align: right;
}

.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ul-none {
  list-style: none;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-default {
  cursor: default;
}

.bg-none {
  background: none !important;
  background-color: transparent !important;
}

.border-b {
  border-bottom: 1px solid #29241f;
}

.img-lg {
  width: 24px;
  height: 24px;
}

.img-xl {
  width: 32px;
  height: 32px;
}

.pixelated {
  image-rendering: pixelated;
}

.w-3-4 {
  width: 75% !important;
}

.w-2-5 {
  width: 40% !important;
}

.w-3-5 {
  width: 60% !important;
}

.w-4-5 {
  width: 80% !important;
}

.w-1-2 {
  width: 50% !important;
}

.w-1-3 {
  width: 33.333333% !important;
}

.w-2-3 {
  width: 66.666667% !important;
}

.w-1-4 {
  width: 25% !important;
}

.w-3-4 {
  width: 75% !important;
}

.w-1-5 {
  width: 20% !important;
}

.max-w-1-3 {
  max-width: 33.333333% !important;
}

.max-w-2-3 {
  max-width: 66.666667% !important;
}

.text-gold {
  color: #d7b795;
}

.text-white {
  color: #c8c8c8;
}

.highlight {
  color: #edc88d;
  font-weight: 700;
}

.bg-grad {
  background: var(--panel-bg-gradient);
  border-radius: 2px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  position: relative;
  border-style: solid;
  border-width: 12px;
  border-image-source: url(/images/ui/wood_frame.gif);
  border-image-slice: 80;
  border-image-width: 80px;
  border-image-repeat: repeat;
  box-sizing: border-box;
}

.bg-grad::after,
.bg-grad-modal::after,
.bg-grad-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  border-radius: 2px;
}

.bg-grad-map {
  background: var(--panel-bg-gradient);
  border-radius: 2px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-sizing: border-box;
}

.bg-grad-map::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  border-radius: 2px;
  border-style: solid;
  border-width: 12px;
  border-image-source: url(/images/ui/wood_frame.gif);
  border-image-slice: 80;
  border-image-width: 80px;
  border-image-repeat: repeat;
}

.sw-card {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid #29241f;
  border-radius: 6px;
  padding: 10px;
}

.card-hover:hover {
  background-color: rgba(25, 25, 25, 0.5);
}

.of-y-auto {
  overflow-y: auto;
}

.z-1000 {
  z-index: 1000;
}

.z-10000 {
  z-index: 10000;
}

/* === Colors === */
.block {
  display: block
}

.inline-block {
  display: inline-block
}

.inline {
  display: inline
}

.flex {
  display: flex
}

.inline-flex {
  display: inline-flex
}

.grid {
  display: grid
}

.hidden {
  display: none !important
}

.static {
  position: static
}

.fixed {
  position: fixed
}

.absolute {
  position: absolute !important
}

.relative {
  position: relative !important
}

.sticky {
  position: sticky
}

.flex-row {
  flex-direction: row
}

.flex-col {
  flex-direction: column
}

.flex-wrap {
  flex-wrap: wrap
}

.flex-nowrap {
  flex-wrap: nowrap
}

.items-start {
  align-items: flex-start
}

.items-center {
  align-items: center
}

.items-end {
  align-items: flex-end
}

.items-stretch {
  align-items: stretch
}

.justify-start {
  justify-content: flex-start
}

.justify-center {
  justify-content: center
}

.justify-end {
  justify-content: flex-end
}

.justify-between {
  justify-content: space-between
}

.justify-around {
  justify-content: space-around
}

.justify-evenly {
  justify-content: space-evenly
}

.grow {
  flex-grow: 1
}

.grow-0 {
  flex-grow: 0
}

.shrink {
  flex-shrink: 1
}

.shrink-0 {
  flex-shrink: 0
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr))
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr))
}

.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr))
}

.grid-cols-2-1-1 {
  grid-template-columns: 2fr 1fr 1fr;
}

.grid-cols-1-2 {
  grid-template-columns: 1fr 2fr;
}

.w-full {
  width: 100%
}

.h-full {
  height: 100%
}

.w-auto {
  width: auto !important
}

.h-auto {
  height: auto !important
}

.min-w-full {
  min-width: 100%
}

.min-h-full {
  min-height: 100%
}

.max-w-full {
  max-width: 100%
}

.max-h-full {
  max-height: 100%
}

.border {
  border-width: 1px
}

.border-0 {
  border-width: 0
}

.border-2 {
  border-width: 2px
}

.border-4 {
  border-width: 4px
}

.border-8 {
  border-width: 8px
}

.rounded {
  border-radius: .25rem
}

.rounded-md {
  border-radius: .375rem
}

.rounded-lg {
  border-radius: .5rem
}

.rounded-xl {
  border-radius: .75rem
}

.rounded-2xl {
  border-radius: 1rem
}

.rounded-full {
  border-radius: 9999px
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1)
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter
}

.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1)
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}

.m-auto {
  margin: auto
}

.m-0-auto {
  margin: 0 auto
}

.m-0 {
  margin: 0.00rem
}

.my-0 {
  margin-top: 0.00rem
}

.my-0 {
  margin-bottom: 0.00rem
}

.mt-0 {
  margin-top: 0.00rem
}

.mb-0 {
  margin-bottom: 0.00rem !important
}

.p-0 {
  padding: 0.00rem
}

.pt-0 {
  padding-top: 0.00rem
}

.pt-1 {
  padding-top: 0.25rem
}

.pb-0 {
  padding-bottom: 0.00rem
}

.m-1 {
  margin: 0.25rem
}

.mt-1 {
  margin-top: 0.25rem
}

.ml-1 {
  margin-left: 0.25rem
}

.p-1 {
  padding: 0.25rem
}

.py-0 {
  padding-top: 0.00rem;
  padding-bottom: 0.00rem;
}

.py-1 {
  padding-top: 0.25rem
}

.py-1 {
  padding-bottom: 0.25rem
}

.pb-1 {
  padding-bottom: 0.25rem
}

.pl-2 {
  padding-left: 0.5rem
}

.pr-2 {
  padding-right: 0.5rem
}

.pl-4 {
  padding-left: 1rem
}

.pr-4 {
  padding-right: 1rem
}

.pl-6 {
  padding-left: 1.5rem
}

.pr-6 {
  padding-right: 1.5rem
}

.pl-8 {
  padding-left: 2rem
}

.pr-8 {
  padding-right: 2rem
}

.pl-12 {
  padding-left: 3rem
}

.pr-12 {
  padding-right: 3rem
}

.gap-1 {
  gap: 0.25rem
}

.m-2 {
  margin: 0.50rem
}

.mx-2 {
  margin-left: 0.50rem
}

.mx-2 {
  margin-right: 0.50rem
}

.my-2 {
  margin-top: 0.50rem
}

.my-2 {
  margin-bottom: 0.50rem
}

.mt-2 {
  margin-top: 0.50rem
}

.mb-2 {
  margin-bottom: 0.50rem
}

.p-2 {
  padding: 0.50rem
}

.px-0 {
  padding-left: 0rem
}

.px-0 {
  padding-right: 0rem
}

.px-1 {
  padding-left: 1rem
}

.px-1 {
  padding-right: 1rem
}

.px-2 {
  padding-left: 0.50rem
}

.px-2 {
  padding-right: 0.50rem
}

.pb-2 {
  padding-bottom: 0.50rem
}

.gap-2 {
  gap: 0.50rem
}

.mt-3 {
  margin-top: 0.75rem
}

.px-3 {
  padding-left: 0.75rem
}

.px-3 {
  padding-right: 0.75rem
}

.py-3 {
  padding-top: 0.75rem
}

.py-3 {
  padding-bottom: 0.75rem
}

.my-4 {
  margin-top: 1.00rem
}

.my-4 {
  margin-bottom: 1.00rem
}

.mt-4 {
  margin-top: 1.00rem
}

.mb-4 {
  margin-bottom: 1.00rem
}

.p-4 {
  padding: 1.00rem
}

.py-4 {
  padding-top: 1.00rem
}

.py-4 {
  padding-bottom: 1.00rem
}

.px-4 {
  padding-left: 1.00rem
}

.px-4 {
  padding-right: 1.00rem
}

.pt-4 {
  padding-top: 1.00rem
}

.pb-4 {
  padding-bottom: 1.00rem
}

.gap-4 {
  gap: 1.00rem
}

.my-6 {
  margin-top: 1.50rem
}

.my-6 {
  margin-bottom: 1.50rem
}

.mb-6 {
  margin-bottom: 1.50rem
}

.p-6 {
  padding: 1.50rem
}

.gap-6 {
  gap: 1.50rem
}

.mt-8 {
  margin-top: 2.00rem
}

.mb-8 {
  margin-bottom: 2.00rem
}

.p-8 {
  padding: 2.00rem
}

.pt-8 {
  padding-top: 2.00rem
}

.pb-8 {
  padding-bottom: 2.00rem
}

.gap-8 {
  gap: 2.00rem
}

.mt-10 {
  margin-top: 2.50rem
}

.gap-10 {
  gap: 2.50rem
}

.pt-12 {
  padding-top: 3.00rem
}

.mt-16 {
  margin-top: 4.00rem
}

.mt-20 {
  margin-top: 5.00rem
}

.mb-20 {
  margin-bottom: 5.00rem
}

.top-0 {
  top: 0.00rem
}

.left-0 {
  left: 0.00rem
}

.w-4 {
  width: 1.00rem
}

.w-6 {
  width: 1.50rem
}

.w-8 {
  width: 2.00rem
}

.h-4 {
  height: 1.00rem
}

.h-6 {
  height: 1.50rem
}

.h-8 {
  height: 2.00rem
}

.h-10 {
  height: 2.50rem
}

.w-12 {
  width: 3.00rem
}

.h-12 {
  height: 3.00rem
}

.max-w-8 {
  max-width: 2.00rem
}

.max-w-10 {
  max-width: 2.50rem
}

.max-w-20 {
  max-width: 5.00rem
}

.w-24 {
  width: 6.00rem
}

.h-24 {
  height: 6.00rem
}

.h-32 {
  height: 8.00rem
}

.h-40 {
  height: 10.00rem
}

.h-48 {
  height: 12.00rem
}

.h-56 {
  height: 14.00rem
}

.w-32 {
  width: 8.00rem
}

.w-64 {
  width: 16.00rem
}

.w-72 {
  width: 18.00rem
}

.w-80 {
  width: 20.00rem
}

.w-96 {
  width: 24.00rem
}

.max-h-96 {
  max-height: 24.00rem
}

.min-h-96 {
  min-height: 24.00rem
}

.p-14-px {
  padding: 14px
}

.py-14-px {
  padding-top: 14px;
  padding-bottom: 14px
}

.w-60-px {
  width: 60px
}

.h-60-px {
  height: 60px
}

.max-h-248-px {
  max-height: 248px
}

.max-h-320-px {
  max-height: 320px
}

.max-h-496-px {
  max-height: 496px
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1.2
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.2
}

.text-md {
  font-size: 1rem;
  line-height: 1.2
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.2
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.2
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 1.2
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 1.2
}

.text-slate-200 {
  color: #e2e8f0
}

.text-gray-50 {
  color: #f9fafb
}

.border-gray-600 {
  border-color: #4b5563
}

.bg-gray-900 {
  background-color: #141517
}

.bg-bo-black {
  background-color: #17181a !important;
  border-color: #29241f !important;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  padding: 0.5rem 1rem;
  background-color: #2563eb;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 /.1), 0 4px 6px -4px rgb(0 0 0 /.1);
  transition: transform .15s, background-color .15s
}

.btn:hover {
  background-color: #1d4ed8
}

.btn:active {
  transform: scale(.98)
}

.card {
  border-radius: 1rem;
  border: 1px solid rgb(30 41 59 / .4);
  background-color: rgb(2 6 23 / .6);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 /.1), 0 4px 6px -4px rgb(0 0 0 /.1);
  padding: 1.5rem
}

.input {
  width: 100%;
  border-radius: .5rem;
  border: 1px solid #334155;
  background-color: rgb(15 23 42 /.6);
  padding: .5rem .75rem;
  color: #e2e8f0
}

.input:focus {
  outline: 2px solid #5f5331;
  outline-offset: 2px
}

.w-400px {
  width: 400px;
}

.w-450px {
  width: 450px;
}

.w-800px {
  width: 800px;
}

.w-1400px {
  width: 1400px;
}

.min-w-290px {
  min-width: 290px;
}

.min-w-340px {
  min-width: 340px;
}

.max-w-290px {
  max-width: 290px;
}

.max-w-340px {
  max-width: 340px;
}

.max-w-500px {
  max-width: 500px;
}

.max-w-600px {
  max-width: 600px;
}

.max-w-900px {
  max-width: 900px;
}

.max-w-1200px {
  max-width: 1200px;
}

.max-w-1400px {
  max-width: 1400px;
}

.os-btn {
  font-family: 'Merriweather';
  font-size: 0.9em;
  border: 6px solid transparent;
  border-image: url(/images/ui/btn_bg.gif) 12 fill round;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #d7b795;
  font-weight: 700;
  letter-spacing: 0px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
  background: none;
  background-clip: padding-box;
}

.os-div {
  background-color: #3d2b22;
  background-image: url(/images/ui/container_bg.gif);
  background-size: auto;
  border-style: solid;
  border-width: 12px;
  border-image-source: url(/images/ui/wood_frame.gif);
  border-image-slice: 80;
  border-image-width: 80px;
  border-image-repeat: repeat;
  box-sizing: border-box;
}

.max-h-70vh {
  max-height: 70vh;
}

.max-h-77vh {
  max-height: 77vh;
}

.max-h-78vh {
  max-height: 78vh;
}

.max-h-80vh {
  max-height: 80vh;
}

.min-h-80vh {
  min-height: 80vh;
}

.int-btn {
  display: block !important;
  /* width: 100% !important; */
  background-color: #111 !important;
  border: none !important;
  border-left: 2px solid #3e3325 !important;
  border-bottom: 1px solid #000 !important;
  color: #edc88d !important;
  padding: 12px 15px 12px 15px !important;
  text-align: left !important;
  font-family: 'Georgia', serif !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: 0.2s !important;
  position: relative !important;
}

.int-btn:hover {
  background-color: #1a1a1a !important;
  color: #edc88d !important;
  border-left: 2px solid #edc88d !important;
  padding-left: 20px !important;
  padding-right: 0px !important;
}

.list-btn {
  background: transparent !important;
  border: none !important;
  color: #c0a062 !important;
  padding: 8px 0 !important;
  font-family: 'Cinzel', serif !important;
  font-size: 0.8em !important;
  cursor: pointer !important;
  position: relative !important;
  transition: 0.4s !important;
  width: 100% !important;
}

.list-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #444, transparent);
  transition: 0.4s;
}

.list-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #444, transparent);
  transition: 0.4s;
}

.list-btn:hover {
  color: #cfc8b5 !important;
  letter-spacing: 1px !important;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3) !important;
  background: transparent !important;
  background: radial-gradient(circle, rgba(100, 88, 50, 0.163) 0%, transparent 70%) !important;
}

.list-btn:hover::before,
.list-btn:hover::after {
  background: linear-gradient(90deg, transparent, #c0a062, transparent);
}

.list-btn-1-5 {
  width: 20% !important;
}

.list-btn-4-5 {
  width: 80% !important;
}

.act-btn {
  background: #111 !important;
  border: 1px solid #333 !important;
  color: #c0a062 !important;
  padding: 15px 30px !important;
  font-family: 'Cinzel', serif !important;
  font-size: 0.8em !important;
  letter-spacing: 0px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all 0.3s ease !important;
  outline: 1px solid #333 !important;
  outline-offset: -6px !important;
}

.act-btn:hover {
  background: #1a1a1a !important;
  color: #fff !important;
  border-color: #555 !important;
  outline-color: #c0a062 !important;
  box-shadow: 0 0 20px rgba(192, 160, 98, 0.1) !important;
}

.act-btn:active {
  outline-offset: -4px !important;
  transform: scale(0.98) !important;
}

.set-btn,
.gather-btn {
  background: #090909 !important;
  border: 1px solid #4a4137 !important;
  color: #b1996a !important;
  padding: 8px 15px !important;
  font-family: 'Cinzel', serif !important;
  font-size: 0.9em !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  transition: 0.3s !important;
  box-shadow: 0 0 10px #000 !important;
  font-weight: 600 !important;
}

.set-btn::before,
.gather-btn::before {
  content: '';
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 0% !important;
  height: 0% !important;
  background: radial-gradient(circle, rgba(100, 88, 50, 0.163) 0%, transparent 70%) !important;
  transition: width 0.4s, height 0.4s !important;
  border-radius: 50% !important;
  z-index: 0 !important;
}

.set-btn span,
.gather-btn span {
  position: relative !important;
  z-index: 1 !important;
  transition: 0.3s !important;
}

.set-btn:hover,
.gather-btn:hover {
  border-color: #4a4137 !important;
  /*box-shadow: 0 0 15px rgba(100, 96, 50, 0.3) !important;*/
}

.set-btn:hover span,
.gather-btn:hover span {
  color: rgba(218, 203, 128, 0.537) !important;
  text-shadow: 0 0 5px rgb(42, 38, 22) !important;
}

.set-btn:hover::before,
.gather-btn:hover::before {
  width: 200% !important;
  height: 200% !important;
}

.set-btn.selected,
.set-btn.active,
.gather-btn.selected,
.gather-btn.active {
  filter: brightness(1.4) !important;
  border-color: #4a4137 !important;
  border-width: 2px !important;
}

.set-btn.selected::before,
.set-btn.active::before,
.gather-btn.selected::before,
.gather-btn.active::before {
  width: 200% !important;
  height: 200% !important;
}

.gather-btn {
  font-size: 0.75em !important;
  padding: 8px 0px !important;
  font-weight: 700 !important;
  margin: 4px 0px !important;
  letter-spacing: -0.6px !important;
}

.gather-btn-value {
  font-weight: 600 !important;
  color: #d5cbb9 !important;
  font-size: 0.9em !important;
}

.set-btn-sm {
  padding: 4px 10px !important;
  font-size: 0.8em !important;
  letter-spacing: -0.3px !important;
}

.set-btn-sm-tlg {
  padding: 4px 10px !important;
  font-size: 1em !important;
}

.set-btn:disabled {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

.magic-btn {
  background: transparent !important;
  border: none !important;
  color: #9d8bff !important;
  padding: 10px 40px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  letter-spacing: 3px !important;
  cursor: pointer !important;
  position: relative !important;
  transition: 0.3s !important;
}

.magic-btn::before,
.magic-btn::after {
  content: '';
  position: absolute !important;
  height: 1px !important;
  width: 20px !important;
  background: #4a4080 !important;
  transition: width 0.3s, background 0.3s !important;
}

.magic-btn::before {
  top: 0;
  left: 0;
}

.magic-btn::after {
  bottom: 0;
  right: 0;
}

.magic-btn span::before,
.magic-btn span::after {
  content: '';
  position: absolute !important;
  width: 1px !important;
  height: 100% !important;
  background: #4a4080 !important;
  transition: 0.3s !important;
}

.magic-btn span::before {
  top: 0;
  left: 0;
}

.magic-btn span::after {
  top: 0;
  right: 0;
}

.magic-btn:hover {
  color: #d0c4ff !important;
  text-shadow: 0 0 8px #8860ff !important;
  background: rgba(70, 50, 150, 0.1) !important;
}

.magic-btn:hover::before,
.magic-btn:hover::after {
  width: 100% !important;
  background: #8860ff !important;
}

.magic-btn:hover span::before,
.magic-btn:hover span::after {
  background: #8860ff !important;
}

.dia-btn {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #888 !important;
  width: 300px !important;
  padding: 12px 15px !important;
  text-align: left !important;
  font-family: inherit !important;
  font-size: 16px !important;
  cursor: pointer !important;
  position: relative !important;
  transition: 0.3s !important;
  display: flex !important;
  justify-content: space-between !important;
}

.dia-btn::after {
  content: '◆';
  font-size: 12px !important;
  color: transparent !important;
  transition: 0.3s !important;
  transform: translateX(-10px) !important;
}

.dia-btn:hover {
  color: #d4af37 !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%) !important;
  border-bottom-color: #d4af37 !important;
  padding-left: 25px !important;
}

.dia-btn:hover::after {
  color: #d4af37 !important;
  transform: translateX(0) !important;
}

.sw-input {
  padding: 8px !important;
  border: 1px solid #4a4137 !important;
  background-color: #111 !important;
  color: #d4d4d4 !important;
  border-radius: 4px !important;
  outline: none !important;
  transition: 0.3s;
}

.text-green {
  color: #5fb15f !important;
}

.text-red {
  color: #c74848 !important;
}

.text-blue {
  color: #5374b2 !important;
}

.text-orange {
  color: #d4af37 !important;
}

/* Ability Icon Styles */
.ability-icon {
  color: #c9a55d;
  flex-shrink: 0;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #555 transparent !important;
}

*::-webkit-scrollbar {
  width: 8px !important;
}

*::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0) !important;
}

*::-webkit-scrollbar-thumb {
  background-color: #555 !important;
  border-radius: 4px !important;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #626262 !important;
}


/* =========================================================
   Responsive breakpoints (desktop-first)
   Base CSS = large desktop
   ========================================================= */

/* ≤ 1400px — narrow desktop / windowed */
@media (max-width: 1400px) {

  /* lg-down */
  .lg\:w {
    width: var(--w);
  }

  .lg\:h {
    height: var(--h);
  }

  .lg\:max-w {
    max-width: var(--mw);
  }

  .lg\:min-w {
    min-width: var(--miw);
  }

  .lg\:p {
    padding: var(--p);
  }

  .lg\:pt {
    padding-top: var(--pt);
  }

  .lg\:pr {
    padding-right: var(--pr);
  }

  .lg\:pb {
    padding-bottom: var(--pb);
  }

  .lg\:pl {
    padding-left: var(--pl);
  }

  .lg\:gap {
    gap: var(--gap);
  }

  .lg\:fs {
    font-size: var(--fs);
  }

  .lg\:lh {
    line-height: var(--lh);
  }
}

/* ≤ 1100px — small desktop / Steam Deck landscape */
@media (max-width: 1100px) {

  /* md-down */
  .md\:w-full {
    width: 100% !important;
  }

  .md\:w-1-2 {
    width: 50%;
  }

  .md\:w-1-3 {
    width: 33.333333%;
  }

  .md\:w-1-4 {
    width: 25%;
  }

  .md\:w-1-5 {
    width: 20%;
  }

  .md\:w-3-4 {
    width: 75%;
  }

  .md\:w-2-3 {
    width: 66.666667%;
  }

  .md\:w-2-5 {
    width: 40%;
  }

  .md\:w-3-5 {
    width: 60%;
  }

  .md\:w-4-5 {
    width: 80%;
  }

  .md\:w {
    width: var(--w);
  }

  .md\:h {
    height: var(--h);
  }

  .md\:h-full {
    height: 100% !important;
  }

  .md\:max-h-full {
    max-height: 100% !important;
  }

  .md\:max-w {
    max-width: var(--mw);
  }

  .md\:max-w-full {
    max-width: 100% !important;
  }

  .md\:min-w {
    min-width: var(--miw);
  }

  .md\:p {
    padding: var(--p);
  }

  .md\:pt {
    padding-top: var(--pt);
  }

  .md\:pr {
    padding-right: var(--pr);
  }

  .md\:pb {
    padding-bottom: var(--pb);
  }

  .md\:pl {
    padding-left: var(--pl);
  }

  .md\:gap {
    gap: var(--gap);
  }

  .md\:fs {
    font-size: var(--fs);
  }

  .md\:lh {
    line-height: var(--lh);
  }

  .md\:grid {
    display: grid;
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .md\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  .md\:flex-col {
    flex-direction: column;
  }

  .md\:flex-row {
    flex-direction: row;
  }
}

/* ≤ 800px — tablet / compact UI */
@media (max-width: 800px) {

  /* sm-down */
  .sm\:w-full {
    width: 100% !important;
  }

  .sm\:w {
    width: var(--w) !important;
  }

  .sm\:h {
    height: var(--h) !important;
  }

  .sm\:h-full {
    height: 100% !important;
  }

  .sm\:max-h-full {
    max-height: 100% !important;
  }

  .sm\:max-h {
    max-height: var(--mh) !important;
  }

  .sm\:min-h {
    min-height: var(--mih) !important;
  }

  .sm\:max-w {
    max-width: var(--mw) !important;
  }

  .sm\:max-w-full {
    max-width: 100% !important;
  }

  .sm\:min-w {
    min-width: var(--miw) !important;
  }

  .sm\:w-1-3 {
    width: 33.333333% !important;
  }

  .sm\:w-2-3 {
    width: 66.666667% !important;
  }

  .sm\:w-3-4 {
    width: 75% !important;
  }

  .sm\:w-3-5 {
    width: 60% !important;
  }

  .sm\:p {
    padding: var(--p) !important;
  }

  .sm\:pt {
    padding-top: var(--pt) !important;
  }

  .sm\:pr {
    padding-right: var(--pr) !important;
  }

  .sm\:pb {
    padding-bottom: var(--pb) !important;
  }

  .sm\:pl {
    padding-left: var(--pl) !important;
  }

  .sm\:p-0 {
    padding: 0em !important;
  }

  .sm\:p-1 {
    padding: 0.25em !important;
  }

  .sm\:p-2 {
    padding: 0.5em !important;
  }

  .sm\:p-3 {
    padding: 0.75em !important;
  }

  .sm\:p-4 {
    padding: 1em !important;
  }

  .sm\:m-0 {
    margin: 0em !important;
  }

  .sm\:m-1 {
    margin: 0.25em !important;
  }

  .sm\:m-2 {
    margin: 0.5em !important;
  }

  .sm\:m-3 {
    margin: 0.75em !important;
  }

  .sm\:m-4 {
    margin: 1em !important;
  }

  .sm\:mt-0 {
    margin-top: 0em !important;
  }

  .sm\:mt-1 {
    margin-top: 0.25em !important;
  }

  .sm\:mt-2 {
    margin-top: 0.5em !important;
  }

  .sm\:mt-3 {
    margin-top: 0.75em !important;
  }

  .sm\:mt-4 {
    margin-top: 1em !important;
  }

  .sm\:m {
    margin: var(--m) !important;
  }

  .sm\:mt {
    margin-top: var(--mt) !important;
  }

  .sm\:mr {
    margin-right: var(--mr) !important;
  }

  .sm\:mb {
    margin-bottom: var(--mb) !important;
  }

  .sm\:ml {
    margin-left: var(--ml) !important;
  }

  .sm\:gap {
    gap: var(--gap) !important;
  }

  .sm\:fs {
    font-size: var(--fs) !important;
  }

  .sm\:lh {
    line-height: var(--lh) !important;
  }

  .sm\:grid {
    display: grid !important;
  }

  .sm\:ta-center {
    text-align: center !important;
  }

  .sm\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .sm\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  .sm\:grid-cols-1-2 {
    grid-template-columns: 1fr 2fr !important;
  }

  .sm\:hidden {
    display: none !important;
  }

  .sm\:flex-col {
    flex-direction: column !important;
  }

  .sm\:flex-row {
    flex-direction: row !important;
  }

  .sm\:flex {
    display: flex !important;
  }

  .sm\:sw-card {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #29241f;
    border-radius: 6px;
    padding: 10px;
  }

  .sm\:justify-between {
    justify-content: space-between !important;
  }

  .sm\:justify-center {
    justify-content: center !important;
  }

  .sm\:of-x-auto {
    overflow-x: auto !important;
  }

  .sm\:of-y-auto {
    overflow-y: auto !important;
  }

  .sm\:of-x-clip {
    overflow-x: clip !important;
  }

  .sm\:text-lg {
    font-size: 1.125rem !important;
  }

  .sm\:text-md {
    font-size: 1rem !important;
  }

  .sm\:text-sm {
    font-size: 0.875rem !important;
  }

  .sm\:text-xs {
    font-size: 0.75rem !important;
  }

  .sm\:set-btn-sm {
    padding: 4px 10px !important;
    font-size: 0.75em !important;
  }

  .sm\:col-span-4 {
    grid-column: span 4 !important;
  }

  .sm\:col-span-3 {
    grid-column: span 3 !important;
  }

  .sm\:col-span-2 {
    grid-column: span 2 !important;
  }

  .sm\:col-span-1 {
    grid-column: span 1 !important;
  }

  .sm\:flex1-mh30 {
    flex: 1;
    max-height: 30% !important;
  }

  .sm\:lh-0 {
    line-height: 0 !important;
  }

  .sm\:lh-1 {
    line-height: 1 !important
  }

}

/* ≤ 500px — phone / extreme fallback (optional) */
@media (max-width: 500px) {

  /* xs-down */
  .xs\:w-full {
    width: 100% !important;
  }

  .xs\:w {
    width: var(--w);
  }

  .xs\:h {
    height: var(--h);
  }

  .xs\:h-full {
    height: 100% !important;
  }

  .xs\:max-h-full {
    max-height: 100% !important;
  }

  .xs\:max-w {
    max-width: var(--mw);
  }

  .xs\:max-w-full {
    max-width: 100% !important;
  }

  .xs\:min-w {
    min-width: var(--miw);
  }

  .xs\:p {
    padding: var(--p);
  }

  .xs\:pt {
    padding-top: var(--pt);
  }

  .xs\:pr {
    padding-right: var(--pr);
  }

  .xs\:pb {
    padding-bottom: var(--pb);
  }

  .xs\:pl {
    padding-left: var(--pl);
  }

  .xs\:gap {
    gap: var(--gap);
  }

  .xs\:fs {
    font-size: var(--fs);
  }

  .xs\:lh {
    line-height: var(--lh);
  }

  .xs\:grid {
    display: grid;
  }

  .xs\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .xs\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  .xs\:hidden {
    display: none !important;
  }

  .xs\:flex-col {
    flex-direction: column !important;
  }

  .xs\:flex-row {
    flex-direction: row !important;
  }
}

.opacity-80 {
  opacity: 0.8 !important;
}

.grayscale {
  filter: grayscale(100%) !important;
}