﻿/* Move picker (Meu Time): thin list with colored type bulbs. Loaded after styles.css. */
.move-picker-dialog { width: min(52rem, 94vw); display: flex; flex-direction: column; max-height: 92vh; }
.move-picker-dialog .move-picker-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2e4063 transparent; padding-bottom: .8rem; }
.move-picker-filter-tabs { flex-wrap: wrap; }
.mp-tools { display: flex; align-items: center; gap: .7rem; padding: .1rem 1.1rem .6rem; flex-wrap: wrap; }
.mp-search { display: flex; align-items: center; gap: .4rem; padding: .3rem .6rem; border: 1px solid #2e4063; border-radius: .5rem; background: #0d1424; min-width: 12rem; }
.mp-search:focus-within { border-color: #fbbf24; }
.mp-search svg { width: .95rem; height: .95rem; fill: none; stroke: #94a3b8; stroke-width: 2; flex: none; }
.mp-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #e2e8f0; font: 600 .78rem var(--font-clean, inherit); }
.mp-dots { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; flex: 1; }
.mp-dot-btn { display: inline-grid; place-items: center; height: 1.7rem; min-width: 1.7rem; padding: 0 .45rem; border-radius: 2rem; border: 1px solid color-mix(in srgb, var(--t) 45%, #2e4063); background: #182238; color: #cbd5e1; font: 800 .55rem var(--font-pixel-ui); cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; }
.mp-dot-btn.is-type { width: 1.7rem; padding: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--t) 75%, #fff), var(--t) 62%, color-mix(in srgb, var(--t) 65%, #000)); border-color: color-mix(in srgb, var(--t) 70%, #000); opacity: .62; }
.mp-dot-btn .game-type-symbol { width: 1rem; height: 1rem; object-fit: contain; filter: drop-shadow(0 1px 1px #0006); }
.mp-dot-btn:hover { transform: translateY(-2px); opacity: 1; }
.mp-dot-btn.is-on { opacity: 1; box-shadow: 0 0 0 2px #0b1222, 0 0 0 4px var(--t), 0 0 .8rem var(--t); }
.mp-dot-btn:not(.is-type).is-on { background: color-mix(in srgb, var(--t) 28%, #182238); color: #fff; }

html:not(.battlemon-mobile) .move-picker-grid { display: grid; grid-template-columns: 1fr; gap: .35rem; align-content: start; }
.mp-empty { grid-column: 1 / -1; text-align: center; color: #94a3b8; padding: 2rem 0; }
.move-picker-card.mp-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; min-height: 0; padding: .35rem .6rem .35rem .4rem; border: 1px solid color-mix(in srgb, var(--t) 38%, #2e4063); border-left: 4px solid var(--t); border-radius: .5rem; background: linear-gradient(90deg, color-mix(in srgb, var(--t) 13%, #182238), #182238 62%); cursor: pointer; transition: transform .12s, box-shadow .15s; }
.move-picker-card.mp-row:hover { transform: translateX(2px); box-shadow: 0 0 .8rem color-mix(in srgb, var(--t) 30%, transparent); }
.move-picker-card.mp-row.is-current { border-color: #fbbf24; box-shadow: 0 0 .7rem #fbbf2440; }
.move-picker-card.mp-row.is-equipped-elsewhere { opacity: .8; }
.mp-bulb { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--t) 78%, #fff), var(--t) 60%, color-mix(in srgb, var(--t) 68%, #000)); box-shadow: 0 0 .55rem color-mix(in srgb, var(--t) 55%, transparent), inset 0 -2px 4px #0004; }
.mp-bulb .game-type-symbol { width: 1.1rem; height: 1.1rem; object-fit: contain; filter: drop-shadow(0 1px 1px #0006); }
.mp-body { min-width: 0; }
.mp-line1 { display: flex; align-items: center; gap: .35rem; flex-wrap: nowrap; }
.mp-line1 .mp-move-name { flex: 0 1 auto; font: 800 .8rem var(--font-pixel-ui); color: #f1f5f9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 6rem; }
.mp-cat, .mp-shop-tag, .mp-line1 .mp-stab-bonus { flex: none; padding: .03rem .3rem; border-radius: .25rem; border: 1px solid #334155; background: #0d1424; color: #94a3b8; font: 800 .45rem var(--font-pixel-ui); letter-spacing: .03em; display: inline-flex; align-items: center; gap: .15rem; }
.mp-cat.is-physical { color: #fb923c; } .mp-cat.is-special { color: #93c5fd; } .mp-cat.is-status { color: #c084fc; }
.mp-shop-tag { color: #fde68a; border-color: #fbbf2488; }
.mp-line1 .mp-stab-bonus { color: #fde68a; } .mp-line1 .mp-stab-bonus svg { width: .6rem; height: .6rem; }
.mp-line2 { display: flex; align-items: baseline; gap: .55rem; margin-top: .1rem; color: #94a3b8; font: 700 .58rem var(--font-clean, inherit); min-width: 0; white-space: nowrap; }
.mp-line2 b { color: #e2e8f0; }
.mp-line2 .mp-desc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #64748b; font-weight: 600; }
.mp-card-action { flex: none; }
.mp-card-action .btn-equip-move { padding: .28rem .65rem; font-size: .6rem; border-radius: .4rem; }
.mp-card-action .mp-status-tag { font-size: .5rem; padding: .2rem .45rem; border-radius: .3rem; white-space: nowrap; }


/* Shop-style filters + bottom fade */
.mp-tools { align-items: center; }
.mp-filter { position: relative; }
.mp-filter .mart-filter-menu { z-index: 30; max-height: 16rem; overflow-y: auto; }
.mp-dots { display: none; }
.move-picker-dialog .move-picker-body { padding-bottom: 2.6rem; -webkit-mask-image: linear-gradient(#000 calc(100% - 2.8rem), transparent); mask-image: linear-gradient(#000 calc(100% - 2.8rem), transparent); }
.move-picker-dialog .modal-header { padding-bottom: .5rem; }

.move-picker-filter-tabs { display: none !important; }
.mp-tools { flex-wrap: nowrap; }
.mp-tools .mp-search { flex: 1; min-width: 8rem; }
.mp-filter .mart-filter-menu { right: 0; left: auto; min-width: 12rem; }

.mp-filter .mart-filter-btn, .mp-filter .mart-filter-btn b { white-space: nowrap; }
.mp-tools .mp-search { min-width: 6rem; }


/* Backpack-style filter bar, fixed modal size */
.move-picker-dialog { height: min(37rem, 92vh); }
.mp-tools { flex-direction: column; align-items: stretch; gap: .55rem; padding: .45rem 1.1rem .3rem; flex: none; }
.mp-bar { --shelf-accent: #38bdf8; display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .35rem .4rem; margin: 0 -.4rem; }
.mp-count { color: #8ea4c2; font: 700 .68rem var(--font-pixel-ui); letter-spacing: .05em; }
.mp-bar .mart-filter-btn { min-height: 2.2rem; }
.mp-tools .mp-search { flex: none; min-width: 0; padding: .45rem .7rem; }
.mp-tools .mp-search input { font-size: .82rem; }
.mp-filter .mart-filter-menu { min-width: 13rem; }
.mp-fsym { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; }
.mp-fsym .game-type-symbol { width: 1.3rem; height: 1.3rem; object-fit: contain; }
.mp-empty { padding: 3rem 0; }
