.page-wrap.see .f-page.lk-page { left: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 58%); grid-template-rows: minmax(0, 1fr) auto; column-gap: calc(16 * var(--u)); row-gap: calc(8 * var(--u)); }
.lk-page .lk-panel { grid-column: 2; grid-row: 1 / 3; min-height: 0; display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.lk-page .lk-foot { grid-column: 2; grid-row: 2; z-index: 1; display: flex; justify-content: flex-end; gap: calc(10 * var(--u)); margin: 0 calc(-1 * var(--edge)) calc(-1 * var(--edge)); padding: calc(18 * var(--u)) var(--edge) var(--edge); background: linear-gradient(180deg, rgba(10, 79, 196, 0), rgba(10, 79, 196, 0.92) 45%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px); mask-image: linear-gradient(90deg, transparent, #000 32px); pointer-events: none; }
.lk-page .lk-foot > * { pointer-events: auto; }
.lk-page .lk-foot .f-btn { min-width: max(calc(130 * var(--u)), 112px); }
.lk-page .lk-foot .f-btn.dark { background: rgba(8, 18, 52, 0.55); box-shadow: inset 0 0 0 2px var(--f-line); }

.lk-head { display: flex; align-items: center; gap: calc(10 * var(--u)); min-height: max(48px, calc(48 * var(--u))); flex: none; }
.lk-head .f-title { font-size: max(calc(40 * var(--u)), 30px); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 4px; }
.lk-count { flex: none; font-family: var(--f-font); font-weight: 700; text-transform: uppercase; font-size: max(calc(14 * var(--u)), 12px); color: var(--f-dim); padding: 4px 10px; border-radius: 99px; background: rgba(0, 0, 0, 0.28); }
.lk-count.full { color: var(--f-yellow); }
.lk-head .lk-cases { flex: none; padding: 0 calc(18 * var(--u)); }

.lk-tabs { flex: none; gap: 6px; padding: 2px; }
.lk-tabs .f-tab { border-radius: 99px; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px var(--f-line); padding: 0 calc(16 * var(--u)); font-size: clamp(14px, calc(15 * var(--u)), 20px); padding: 0 clamp(12px, calc(14 * var(--u)), 22px); opacity: 1; }
.lk-tabs .f-tab.sel { background: #c9f0ff; color: var(--f-ink); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); }

.lk-body { flex: 1; min-height: 0; overflow: auto; scrollbar-width: none; touch-action: pan-y; padding: 4px 4px calc(max(48px, 48 * var(--u)) + 24px); }
.lk-body::-webkit-scrollbar { display: none; }
.lk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(82px, calc(96 * var(--u)), 140px), 1fr)); gap: calc(8 * var(--u)); }

.lk-tile {
  position: relative; aspect-ratio: 1; min-height: 64px; border: 0; padding: 0; cursor: pointer; overflow: hidden; border-radius: 12px; color: #fff;
  background: var(--r-free); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28), 0 4px 10px rgba(0, 0, 0, 0.28);
  display: flex; flex-direction: column; font-family: var(--f-font); transition: transform 0.08s;
}
.lk-tile:active { transform: scale(0.96); }
.lk-tile.common { background: var(--r-common); } .lk-tile.rare { background: var(--r-rare); } .lk-tile.epic { background: var(--r-epic); }
.lk-tile.legendary { background: var(--r-legendary); } .lk-tile.special { background: var(--r-special); }
.lk-tile::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.35), transparent 60%); pointer-events: none; }
.lk-art { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; padding: 10% 12% 0; }
.lk-art svg, .lk-art img { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.35)); }
.lk-art .lk-emo { font-size: max(calc(36 * var(--u)), 30px); line-height: 1; }
.lk-name { position: relative; padding: 3px 6px 6px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.5)); font-weight: 700; text-transform: uppercase; font-size: max(calc(12 * var(--u)), 12px); line-height: 1.1; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.lk-tile.on { box-shadow: inset 0 0 0 4px var(--f-yellow), 0 0 16px rgba(255, 226, 52, 0.6); }
.lk-tile.pick { box-shadow: inset 0 0 0 4px #fff, 0 0 14px rgba(255, 255, 255, 0.5); }
.lk-tile.locked .lk-art { filter: saturate(0.4) brightness(0.75); }
.lk-mark { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.lk-mark svg { width: 15px; height: 15px; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lk-mark.ok { background: var(--f-yellow); }
.lk-mark.ok svg { stroke: var(--f-ink); }
.lk-mark.lock { background: rgba(8, 18, 52, 0.8); }
.lk-mark.lock svg { stroke: #fff; stroke-width: 2.4; }
.lk-tile.more { background: rgba(8, 18, 52, 0.4); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35); }
.lk-tile.more::before { display: none; }
.lk-tile.more b { font-size: max(calc(30 * var(--u)), 24px); font-weight: 700; color: var(--f-yellow); }

.lk-note { margin: 0 0 8px; padding: 8px 12px; border-radius: 8px; background: rgba(8, 18, 52, 0.45); box-shadow: inset 3px 0 0 var(--f-yellow); font: 600 max(calc(13 * var(--u)), 12px)/1.3 system-ui, sans-serif; color: #e6efff; }
.lk-sect { font-family: var(--f-font); font-weight: 700; font-style: italic; text-transform: uppercase; font-size: max(calc(17 * var(--u)), 15px); margin: calc(10 * var(--u)) 0 calc(6 * var(--u)); }
.lk-sect:first-child { margin-top: 0; }
.lk-swatches { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); }
.lk-sw { width: max(calc(56 * var(--u)), 50px); height: max(calc(56 * var(--u)), 50px); border: 0; padding: 0; border-radius: 12px; cursor: pointer; background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.15)), var(--c); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35), 0 3px 8px rgba(0, 0, 0, 0.3); display: grid; place-items: center; }
.lk-swatches.sm .lk-sw { width: max(calc(44 * var(--u)), 40px); height: max(calc(44 * var(--u)), 40px); }
.lk-swatches.sm .lk-sw svg { width: 20px; height: 20px; }
.lk-sw.on { box-shadow: inset 0 0 0 4px var(--f-yellow), 0 0 14px rgba(255, 226, 52, 0.6); }
.lk-sw svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7)); }
.lk-chips { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); }
.lk-chip { min-height: max(calc(52 * var(--u)), 48px); min-width: max(calc(96 * var(--u)), 84px); padding: 0 calc(16 * var(--u)); border: 0; border-radius: 12px; cursor: pointer; color: #fff; background: var(--r-free); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28), 0 3px 8px rgba(0, 0, 0, 0.25); font-family: var(--f-font); font-weight: 700; text-transform: uppercase; font-size: max(calc(15 * var(--u)), 14px); }
.lk-chip.on { background: var(--r-rare); box-shadow: inset 0 0 0 4px var(--f-yellow), 0 0 14px rgba(255, 226, 52, 0.55); }

.lk-info { position: absolute; left: calc(env(safe-area-inset-left) + var(--edge)); bottom: calc(env(safe-area-inset-bottom) + var(--edge)); width: min(36%, 380px); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55); pointer-events: none; }
.lk-tag { display: inline-block; padding: 3px 12px; border-radius: 99px; background: var(--rc); color: var(--f-ink); text-shadow: none; font-family: var(--f-font); font-weight: 700; text-transform: uppercase; font-size: max(calc(13 * var(--u)), 12px); letter-spacing: 0.03em; }
.lk-info .lk-big { font-size: max(calc(36 * var(--u)), 28px); margin: 6px 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-right: 4px; }
.lk-info p { margin: 0; font: 600 max(calc(14 * var(--u)), 12px)/1.3 system-ui, sans-serif; color: #e6efff; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.emote-wheel.ew { align-items: flex-end; justify-content: center; padding: 0 calc(env(safe-area-inset-right) + var(--edge)) calc(env(safe-area-inset-bottom) + var(--edge)) calc(env(safe-area-inset-left) + var(--edge)); background: linear-gradient(180deg, rgba(8, 18, 52, 0.1), rgba(8, 18, 52, 0.55)); }
.ew-tray { max-width: min(100%, 1120px); max-height: 100%; overflow: auto; scrollbar-width: none; padding: calc(10 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)); border-radius: 16px; background: linear-gradient(160deg, rgba(10, 79, 196, 0.94), rgba(8, 18, 52, 0.94)); box-shadow: inset 0 0 0 2px var(--f-line), 0 12px 30px rgba(0, 0, 0, 0.4); animation: pnl 0.15s ease-out; }
.ew-tray::-webkit-scrollbar { display: none; }
.ew-head { display: flex; align-items: center; gap: 10px; margin-bottom: calc(8 * var(--u)); }
.ew-head .f-title { font-size: max(calc(30 * var(--u)), 24px); padding-right: 4px; }
.ew-hint { flex: 1; font-family: var(--f-font); font-weight: 600; text-transform: uppercase; font-size: max(calc(13 * var(--u)), 12px); color: var(--f-dim); }
.ew-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(8 * var(--u)); }
.ew-tile { position: relative; flex: none; width: clamp(94px, calc(92 * var(--u)), 124px); height: clamp(80px, calc(88 * var(--u)), 118px); border: 0; padding: 6px 3px; border-radius: 12px; cursor: pointer; overflow: hidden; color: #fff; background: var(--r-free); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28), 0 4px 10px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-family: var(--f-font); transition: transform 0.08s; }
.ew-tile:active { transform: scale(0.95); }
.ew-tile::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.35), transparent 60%); pointer-events: none; }
.ew-tile.rare { background: var(--r-rare); } .ew-tile.epic { background: var(--r-epic); } .ew-tile.legendary { background: var(--r-legendary); }
.ew-tile i { position: relative; font-style: normal; font-size: clamp(28px, calc(34 * var(--u)), 46px); line-height: 1; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35)); }
.ew-tile i img { width: max(calc(46 * var(--u)), 40px); height: max(calc(46 * var(--u)), 40px); object-fit: contain; }
.ew-tile span { position: relative; max-width: 100%; font-weight: 700; text-transform: uppercase; font-size: clamp(12px, calc(11 * var(--u)), 16px); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.ew-tile.more { background: var(--f-yellow); color: var(--f-ink); }
.ew-tile.more::before { display: none; }
.ew-tile.more i { font-family: var(--f-font); font-weight: 700; filter: none; }
.ew-tile.more span { text-shadow: none; }