/* === Fonts === */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Merriweather:wght@300;400;700;900&family=IM+Fell+English:ital@0;1&display=swap');
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 }
.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-2-1-1 { grid-template-columns: 2fr 1fr 1fr; }
.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-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}
.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-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-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}
.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;	}

.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.4px !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;
  }

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

  /* 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\: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\: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\: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; }

}

/* ≤ 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; }
}