@font-face { font-family: "Lilita One"; src: url(../assets/fonts/lilita-one.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url(../assets/fonts/chakra-600.woff2) format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url(../assets/fonts/chakra-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
/* MEKARA UI KIT — buttons, icon buttons, pills, tabs, selects.
   One shape language: chamfered glossy plates with a bright rim, soft outer glow and a thick base shadow.
   Variants set a few custom properties; states (hover / active / selected / disabled) adjust them. */

.mk, .btn-go, .btn-m, .btn-s {
  --c: 9px;
  --shape: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
  --edge: linear-gradient(180deg, #7FB0FF, #3B6FE0);
  --fill: linear-gradient(180deg, #1A2A5C 0%, #111D45 55%, #0C1636 100%);
  --ink: #FFFFFF; --glow: rgba(70, 130, 255, .38); --gs: 6px; --base: #040918; --lift: 3px; --bright: 1;
  position: relative; isolation: isolate; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
  font: 400 20px/1 "Lilita One", "Chakra Petch", system-ui, sans-serif; letter-spacing: .03em; text-transform: uppercase; color: var(--ink) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .18);
  filter: drop-shadow(0 var(--lift) 0 var(--base)) drop-shadow(0 0 var(--gs) var(--glow)) brightness(var(--bright));
  transition: filter .15s, transform .08s; cursor: pointer; -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
.mk::before, .btn-go::before, .btn-m::before, .btn-s::before {
  content: ""; position: absolute; inset: 0; z-index: -2; background: var(--edge); clip-path: var(--shape);
}
.mk::after, .btn-go::after, .btn-m::after, .btn-s::after {
  content: ""; position: absolute; inset: 2px; z-index: -1; clip-path: var(--shape);
  background:
    linear-gradient(90deg, rgba(0,0,0,.16) 0 5px, transparent 5px calc(100% - 5px), rgba(0,0,0,.16) calc(100% - 5px)),
    linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.08) 38%, rgba(255,255,255,0) 50%, rgba(0,0,0,.12) 100%),
    var(--fill);
}
.mk svg { flex: none; }

/* ---- variants ---- */
.mk-dark, .btn-m, .btn-s { /* navy (EQUIP, CLOSE, tabs of actions) */ }
.mk-primary, .btn-go, .btn-s.primary {
  --edge: linear-gradient(180deg, #FFF0B8, #FFB020); --fill: linear-gradient(180deg, #FFC743 0%, #FF9E1F 55%, #F2780C 100%);
  --ink: #241000; --glow: rgba(255, 168, 40, .5); --base: #8E3E00; text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.mk-cyan {
  --edge: linear-gradient(180deg, #D4FCFF, #5CD6FF); --fill: linear-gradient(180deg, #86EEFF 0%, #45B9FF 55%, #2B8BF0 100%);
  --ink: #041634; --glow: rgba(80, 200, 255, .55); --base: #12508F; text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.mk-outline-cyan {
  --edge: linear-gradient(180deg, #A8F3FF, #3FC8FF); --fill: linear-gradient(180deg, #0E1C44, #0A1434);
  --ink: #7FE8FF; --glow: rgba(63, 200, 255, .45);
}
.mk-danger, .btn-s.danger {
  --edge: linear-gradient(180deg, #FFC0C6, #FF5A68); --fill: linear-gradient(180deg, #FF7A82 0%, #EC4452 55%, #C92A3A 100%);
  --ink: #2A0006; --glow: rgba(255, 80, 95, .45); --base: #6E0E1C; text-shadow: 0 1px 0 rgba(255,255,255,.3);
}
.mk-success {
  --edge: linear-gradient(180deg, #A6FFE4, #2FD9A6); --fill: linear-gradient(180deg, #0F3238, #0A2028);
  --ink: #7CFFD4; --glow: rgba(40, 230, 170, .5);
}
.mk-owned {
  --edge: linear-gradient(180deg, #7FA8FF, #3E6BE8); --fill: linear-gradient(180deg, #13245A, #0C1840);
  --ink: #FFFFFF; --glow: rgba(70, 120, 255, .35);
}
.mk-premium {
  --edge: linear-gradient(180deg, #FFF8C8, #F0B820); --fill: linear-gradient(180deg, #FFE079 0%, #F2BB2A 50%, #C98A08 100%);
  --ink: #2A1600; --glow: rgba(255, 214, 80, .75); --gs: 10px; --base: #7A4E00; text-shadow: 0 1px 0 rgba(255,255,255,.45);
}
.mk-premium .spark { position: absolute; width: 10px; height: 10px; background: #FFF6C8; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: mkSpark 2.4s ease-in-out infinite; }
.mk-premium .spark.a { top: 4px; right: 10px; } .mk-premium .spark.b { bottom: 6px; left: 12px; width: 7px; height: 7px; animation-delay: -1.2s; }
@keyframes mkSpark { 50% { transform: scale(.5) rotate(45deg); opacity: .5; } }
.mk-locked {
  --edge: linear-gradient(180deg, #5F6FB0, #3A4680); --fill: linear-gradient(180deg, #151B3E, #0E1330);
  --ink: #FF9CC4; --glow: rgba(90, 100, 200, .25);
}
.mk-locked-premium {
  --edge: linear-gradient(180deg, #FFE38A, #D49A10); --fill: linear-gradient(180deg, #2E2410, #1A1408);
  --ink: #FFD24A; --glow: rgba(255, 196, 60, .45);
}

/* ---- states ---- */
.mk:hover:not(:disabled):not(.is-disabled), .mk.is-active, .btn-go:hover:not(:disabled), .btn-m:hover:not(:disabled), .btn-s:hover:not(:disabled) { --gs: 13px; --bright: 1.07; }
.mk:active:not(:disabled), .btn-go:active:not(:disabled), .btn-m:active:not(:disabled), .btn-s:active:not(:disabled) { transform: translateY(2px); --lift: 1px; }
.mk.is-selected { --gs: 12px; --glow: rgba(90, 225, 255, .95); --edge: linear-gradient(180deg, #FFFFFF, #7FE8FF); }
.mk:disabled, .mk.is-disabled, .btn-go:disabled, .btn-m:disabled, .btn-s:disabled {
  --edge: linear-gradient(180deg, #8A94B8, #5A6488); --fill: linear-gradient(180deg, #4E587E 0%, #3E476A 55%, #343C5C 100%);
  --ink: #AEB7D4; --glow: transparent; --base: #20263C; text-shadow: none; cursor: default; opacity: 1 !important;
}
.mk-locked:disabled, .mk-locked.is-disabled { --ink: #9AA3C4; }
.mk-owned:disabled, .mk-success:disabled { --edge: var(--edge); }
.mk-owned[disabled] { --edge: linear-gradient(180deg, #7FA8FF, #3E6BE8); --fill: linear-gradient(180deg, #13245A, #0C1840); --ink: #FFFFFF; --glow: rgba(70,120,255,.3); --base: #040918; }

/* ---- sizes ---- */
.mk-lg { min-height: 62px; padding: 0 30px; font-size: 30px; --c: 12px; }
.mk-sm, .btn-s { min-height: 36px; padding: 0 14px; font-size: 14px; --c: 6px; --lift: 2px; gap: 5px; }
.btn-s { letter-spacing: .04em; }
.mk-block { display: flex; width: 100%; }
.btn-m { display: flex; width: 100%; min-height: 48px; font-size: 20px; text-align: center; }
.btn-go { min-height: 54px; font-size: 22px; }
.mk .ck { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #7CFFD4; color: #0A2028; }
.mk-owned .ck { background: #9DB9FF; color: #0C1840; }
.mk-sm .ck, .btn-s .ck { width: 16px; height: 16px; }

/* ---- icon buttons ---- */
.mk-ic {
  position: relative; width: 48px; height: 48px; border-radius: 50%; padding: 0; display: inline-grid; place-items: center; color: #EEF3FF;
  background: radial-gradient(circle at 50% 30%, #1E2E62, #0C1636 70%); border: 2px solid #4F7FFF;
  box-shadow: 0 0 12px rgba(70, 130, 255, .45), inset 0 0 10px rgba(70, 130, 255, .22); transition: box-shadow .15s, transform .08s; cursor: pointer;
}
.mk-ic:hover { box-shadow: 0 0 18px rgba(90, 150, 255, .7), inset 0 0 12px rgba(90, 150, 255, .35); }
.mk-ic:active { transform: scale(.94); }
.mk-ic.wide { width: 68px; border-radius: 20px; }
.mk-ic.cyan { background: transparent; border: 3px solid #3FD6FF; color: #3FD6FF; box-shadow: 0 0 12px rgba(63, 214, 255, .7), inset 0 0 8px rgba(63, 214, 255, .35); }
.mk-ic.fav-on { color: #FFC83A; } .mk-ic.fav-on svg path { fill: #FFC83A; stroke: #FFC83A; }
.mk-ic:disabled { border-color: #5A6488; color: #7A84A6; box-shadow: none; }
.mk-ic .rdot { position: absolute; top: 0; right: 0; width: 14px; height: 14px; border-radius: 50%; background: #FF3B4E; box-shadow: 0 0 8px rgba(255, 59, 78, .8); }

/* ---- currency pills ---- */
.mk-pill { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px 0 5px; border-radius: 22px; box-sizing: border-box;
  background: linear-gradient(180deg, #13214F, #0C1636); border: 2px solid #3F6FE8; box-shadow: 0 0 10px rgba(70, 120, 255, .35);
  font: 400 22px/1 "Lilita One", system-ui, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.mk-pill .coin, .mk-pill .gem { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.mk-pill .coin { background: radial-gradient(circle at 40% 35%, #FFE27A, #F2A81E 70%); color: #3A2200; font-size: 18px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); }
.mk-pill .gem { background: radial-gradient(circle at 40% 35%, #BFEAFF, #3E86F5 75%); }
.mk-pill .gem::before { content: ""; width: 14px; height: 14px; background: #0C1636; transform: rotate(45deg); border-radius: 2px; }
.mk-pill .add { width: 26px; height: 26px; margin-right: -12px; border-radius: 8px; border: 0; background: linear-gradient(180deg, #3B82F6, #1D4ED8); color: #fff; font-size: 18px; line-height: 1; padding: 0; }

/* ---- empty-state button ---- */
.mk-empty { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 64px; padding: 0 28px; box-sizing: border-box;
  border-radius: 18px; border: 2px solid #3F6FE8; background: linear-gradient(180deg, #13214F, #0C1636); color: #fff;
  font: 400 22px/1 "Lilita One", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .03em; box-shadow: 0 0 12px rgba(70,120,255,.35); cursor: pointer; }
.mk-empty::before { content: ""; position: absolute; inset: 7px; border: 2px dashed rgba(120, 160, 255, .55); border-radius: 12px; pointer-events: none; }
.mk-empty svg { color: #9DB9FF; }

/* ---- tabs & selects ---- */
.mk-tab, .tabs button {
  min-height: 40px; padding: 0 16px; border-radius: 12px !important; border: 1.5px solid #3F6FE8 !important;
  background: linear-gradient(180deg, #14224F, #0C1636) !important; color: #fff !important;
  font: 400 15px/1 "Lilita One", system-ui, sans-serif !important; letter-spacing: .02em !important; box-shadow: 0 0 8px rgba(70,120,255,.28); transition: box-shadow .15s;
}
.mk-tab.sel, .tabs button.sel {
  border-color: #FFE39A !important; background: linear-gradient(180deg, #FFC743, #FF9A1A 60%, #F2780C) !important; color: #241000 !important;
  box-shadow: 0 0 12px rgba(255, 170, 40, .6), inset 0 2px 0 rgba(255,255,255,.35);
}
.mk-select, select {
  appearance: none; -webkit-appearance: none; min-height: 40px; padding: 0 38px 0 14px !important; border-radius: 12px !important; border: 1.5px solid #3F6FE8 !important;
  background: linear-gradient(180deg, #14224F, #0C1636) !important; color: #fff !important; font: 400 15px/1 "Lilita One", system-ui, sans-serif !important;
  box-shadow: 0 0 8px rgba(70,120,255,.28);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), linear-gradient(180deg, #14224F, #0C1636) !important;
  background-repeat: no-repeat !important; background-position: right 10px center, 0 0 !important; background-size: 18px, 100% !important;
}
@media (prefers-reduced-motion: reduce) { .mk-premium .spark { animation: none; } }

.mk-purple { --edge: linear-gradient(180deg, #E6D4FF, #A575FF); --fill: linear-gradient(180deg, #8E5CF0 0%, #6D3BD8 55%, #4E24A8 100%);
  --ink: #FFFFFF; --glow: rgba(160, 100, 255, .5); --base: #2A0E66; }