@font-face { font-family: 'Display'; src: url(../assets/fonts/oswald-cyr.woff2) format('woff2'); font-weight: 200 700; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Display'; src: url(../assets/fonts/oswald-lat.woff2) format('woff2'); font-weight: 200 700; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --f-font: 'Display', 'Arial Narrow', sans-serif;
  --f-bg1: #0a4fc4;
  --f-bg2: #1677e8;
  --f-bg3: #2c9bff;
  --f-nav-sel: #e9dcff;
  --f-panel: rgba(8, 18, 52, 0.72);
  --f-panel2: rgba(255, 255, 255, 0.08);
  --f-line: rgba(255, 255, 255, 0.18);
  --f-yellow: #ffe234;
  --f-yellow-d: #c9a90a;
  --f-blue: #2f8cff;
  --f-blue-d: #1a55b8;
  --f-ink: #0b1230;
  --f-text: #ffffff;
  --f-dim: rgba(255, 255, 255, 0.72);
  --f-green: #54d36a;
  --f-red: #ff4d5e;
  --f-skew: 0deg;
  --f-tap: max(48px, calc(48 * var(--u)));
  --r-common: linear-gradient(180deg, #b7c3d0, #6a7686);
  --r-rare: linear-gradient(180deg, #49c8ff, #1a5fc8);
  --r-epic: linear-gradient(180deg, #c97bff, #6526b8);
  --r-legendary: linear-gradient(180deg, #ffbe4d, #c0561d);
  --r-special: linear-gradient(160deg, #ff6fae, #b0175c);
  --r-free: linear-gradient(160deg, #7f93b5, #3d4f74);
  --rc-common: #b6c0cc;
  --rc-rare: #4fd0ff;
  --rc-epic: #d48cff;
  --rc-legendary: #ffc05a;
  --rc-special: #ff8cc0;
  --rc-free: #9fb0cf;
}

.f-title { font-family: var(--f-font); font-weight: 700; text-transform: uppercase; font-style: italic; letter-spacing: 0.01em; line-height: 0.95; color: var(--f-text); text-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); }
.f-sub { font-family: var(--f-font); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--f-dim); }
.f-num { font-family: var(--f-font); font-weight: 700; }

.f-btn {
  font-family: var(--f-font); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: max(calc(17 * var(--u)), 15px);
  min-height: max(48px, calc(48 * var(--u))); padding: 0 calc(22 * var(--u)); border: 0; border-radius: 8px; cursor: pointer; color: var(--f-ink);
  background: var(--f-yellow); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18), 0 3px 10px rgba(0, 0, 0, 0.25);
  transform: skewX(var(--f-skew)); display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
}
.f-btn > * { transform: skewX(calc(-1 * var(--f-skew))); }
.f-btn:active { filter: brightness(0.92); transform: skewX(var(--f-skew)) translateY(2px); }
.f-btn:disabled { opacity: 0.45; filter: grayscale(0.4); }
.f-btn.blue { background: var(--f-blue); color: #fff; }
.f-btn.dark { background: rgba(140, 150, 220, 0.45); color: #fff; box-shadow: none; }
.f-btn.green { background: var(--f-green); color: var(--f-ink); }
.f-btn.red { background: var(--f-red); color: #fff; }
.f-btn.big { font-size: max(calc(30 * var(--u)), 24px); min-height: max(68px, calc(72 * var(--u))); padding: 0 calc(36 * var(--u)); }

.f-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 6px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 2px var(--f-line); color: #fff; font-family: var(--f-font); font-weight: 700; font-size: max(calc(17 * var(--u)), 15px); }

.f-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; }
.f-tabs::-webkit-scrollbar { display: none; }
.f-tab { flex: none; border: 0; background: transparent; color: #fff; cursor: pointer; font-family: var(--f-font); font-weight: 700; text-transform: uppercase; font-size: max(calc(17 * var(--u)), 15px); letter-spacing: 0.03em; min-height: max(48px, calc(48 * var(--u))); padding: 0 calc(16 * var(--u)); border-radius: 6px; opacity: 0.85; }
.f-tab.sel { background: var(--f-nav-sel); color: var(--f-ink); opacity: 1; }
.f-tab .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--f-yellow); margin-left: 4px; vertical-align: top; }

.f-card {
  position: relative; border: 0; padding: 0; cursor: pointer; overflow: hidden; border-radius: 10px; color: #fff; text-align: left;
  background: var(--r-free); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25), 0 4px 12px rgba(0, 0, 0, 0.3);
  display: flex; flex-direction: column; min-height: calc(150 * var(--u));
}
.f-card.common { background: var(--r-common); } .f-card.rare { background: var(--r-rare); } .f-card.epic { background: var(--r-epic); }
.f-card.legendary { background: var(--r-legendary); } .f-card.special { background: var(--r-special); }
.f-card .art { flex: 1; display: grid; place-items: center; padding: 10px; }
.f-card .art img, .f-card .art svg { width: 78%; max-height: calc(110 * var(--u)); object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.35)); }
.f-card .bar { background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.45)); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.f-card .name { font-family: var(--f-font); font-weight: 700; text-transform: uppercase; font-size: max(calc(15 * var(--u)), 14px); line-height: 1.05; }
.f-card .meta { font-family: var(--f-font); font-weight: 600; font-size: max(calc(13 * var(--u)), 12px); color: var(--f-dim); display: flex; align-items: center; gap: 6px; }
.f-card.sel { box-shadow: inset 0 0 0 4px var(--f-yellow), 0 0 18px rgba(255, 226, 52, 0.55); }
.f-card .owned { color: #63ff8a; font-family: var(--f-font); font-weight: 700; text-transform: uppercase; font-size: max(calc(12 * var(--u)), 12px); }
.f-card .flag { position: absolute; top: 6px; left: 6px; padding: 2px 8px; border-radius: 4px; background: var(--f-yellow); color: var(--f-ink); font-family: var(--f-font); font-weight: 700; font-size: 12px; text-transform: uppercase; }
.f-card:disabled { cursor: default; filter: saturate(0.6) brightness(0.8); }

.f-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(calc(132 * var(--u)), 120px), 1fr)); gap: calc(10 * var(--u)); }
.f-section { font-family: var(--f-font); font-weight: 700; font-style: italic; text-transform: uppercase; color: #fff; font-size: max(calc(20 * var(--u)), 17px); margin: calc(16 * var(--u)) 0 calc(8 * var(--u)); display: flex; align-items: center; gap: 10px; }
.f-section small { font-style: normal; color: var(--f-dim); font-size: 0.7em; }
.f-prog { height: 10px; border-radius: 2px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.f-prog i { display: block; height: 100%; background: var(--f-yellow); }
.f-row { display: flex; align-items: center; gap: 12px; min-height: max(48px, calc(48 * var(--u))); padding: 10px 14px; background: var(--f-panel2); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--f-line); color: #fff; }

.page-wrap { position: absolute; inset: 0; z-index: 5; background: linear-gradient(135deg, var(--f-bg1), var(--f-bg2) 60%, var(--f-bg3)); }
.page-wrap::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 22px); pointer-events: none; }
.page-wrap.see { background: linear-gradient(90deg, rgba(11, 26, 74, 0) 30%, rgba(11, 26, 74, 0.85) 48%, var(--f-bg1) 100%); }
.page-wrap.see::before { display: none; }
.f-page { position: absolute; inset: 0; display: flex; flex-direction: column; color: #fff; padding: calc(env(safe-area-inset-top) + var(--edge)) calc(env(safe-area-inset-right) + var(--edge)) calc(env(safe-area-inset-bottom) + var(--edge)) calc(env(safe-area-inset-left) + var(--edge)); }
.page-wrap.see .f-page { left: 40%; }
.f-page-head { display: flex; align-items: center; gap: 12px; min-height: max(48px, calc(48 * var(--u))); flex: none; }
.f-page-head .f-title { font-size: max(calc(40 * var(--u)), 30px); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-close { flex: none; width: max(48px, calc(48 * var(--u))); height: max(48px, calc(48 * var(--u))); border: 0; border-radius: 6px; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 26px; cursor: pointer; box-shadow: inset 0 0 0 2px var(--f-line); }
.f-page-body { flex: 1; min-height: 0; overflow: auto; scrollbar-width: none; touch-action: pan-y; padding: 4px 2px calc(12 * var(--u)); }
.f-page-body::-webkit-scrollbar { display: none; }
.f-page-foot { flex: none; display: flex; align-items: center; gap: 12px; justify-content: flex-end; padding-top: 8px; min-height: max(48px, calc(48 * var(--u))); }
.f-page-foot .grow { flex: 1; min-width: 0; font-family: var(--f-font); font-weight: 600; color: var(--f-dim); }