/* Missões: colored tabs, one long row per mission (icon, goal + bar, rewards, claim), glow on ready rows. */
#missionsScreen { overflow: hidden; }
.ms-hub { --mc: #38bdf8; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: .7rem; width: 100%; max-width: 78rem; height: calc(100vh - 8.6rem); margin: 0 auto; padding: 0 1rem; font-family: var(--font-clean, inherit); }
.ms-head { display: flex; align-items: center; justify-content: flex-start; gap: 1.1rem; padding-bottom: .6rem; border-bottom: 1px solid #344761; }
.ms-head h2 { margin: 0; color: #e8f5ff; font: 800 1.5rem var(--font-pixel-ui); letter-spacing: .04em; }
.ms-pills { display: flex; gap: .6rem; }
.ms-pills > span { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: .6rem; border: 1px solid #344b6c; background: linear-gradient(180deg, #14213a, #0d1626); color: #9fb3cf; font: 800 .62rem var(--font-pixel-ui); letter-spacing: .05em; }
.ms-streak { border-color: #fb923c !important; box-shadow: 0 0 1rem #fb923c33; } .ms-streak b { color: #fdba74; font-size: .85rem; }
.ms-reset { color: var(--mc) !important; border-color: color-mix(in srgb, var(--mc) 55%, #0b1424) !important; }

.ms-tabs { display: flex; align-items: center; gap: .6rem; }
.ms-tab { --tc: #38bdf8; position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .5rem; min-width: 9rem; justify-content: center; padding: .65rem 1.1rem; border: 2px solid color-mix(in srgb, var(--tc) 40%, #0b1424); border-radius: .8rem; background: linear-gradient(180deg, #14213a, #0d1626); color: color-mix(in srgb, var(--tc) 70%, #fff); font: 800 .72rem var(--font-pixel-ui); letter-spacing: .06em; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
.ms-tab:hover { transform: translateY(-2px); border-color: var(--tc); box-shadow: 0 0 1.1rem color-mix(in srgb, var(--tc) 40%, transparent); }
.ms-tab.is-on { border-color: var(--tc); color: #fff; background: radial-gradient(ellipse at 50% 0, color-mix(in srgb, var(--tc) 45%, transparent), transparent 75%), linear-gradient(180deg, color-mix(in srgb, var(--tc) 22%, #14213a), #0d1626); box-shadow: 0 0 1.4rem color-mix(in srgb, var(--tc) 50%, transparent), inset 0 1px #ffffff22; }
.ms-tab.is-on::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 35%; pointer-events: none; background: linear-gradient(100deg, transparent, #ffffff44, transparent); transform: translateX(-160%) skewX(-18deg); animation: msShine 6s ease-in-out infinite; }
.ms-tab b { min-width: 1.3rem; padding: .12rem .35rem; border-radius: 1rem; background: #f43f5e; color: #fff; font: 800 .62rem var(--font-clean, inherit); box-shadow: 0 0 .6rem #f43f5e99; }
.ms-all { margin-left: auto; margin-right: .4rem; width: 8rem; padding: .65rem .4rem; border: 2px solid #86efac; border-radius: .8rem; background: linear-gradient(180deg, #4ade80, #15803d); color: #04170b; font: 800 .7rem var(--font-pixel-ui); letter-spacing: .05em; cursor: pointer; box-shadow: 0 .15rem 0 #14532d, 0 0 1.1rem #22c55e55; }
.ms-all:disabled { filter: grayscale(.9); opacity: .4; cursor: default; box-shadow: none; }

.ms-board { position: relative; min-height: 0; display: grid; }
.ms-board::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2.4rem; pointer-events: none; background: linear-gradient(transparent, #0a1220); }
.ms-list { display: grid; grid-auto-rows: max-content; align-content: start; gap: .5rem; overflow-y: auto; min-height: 0; padding: .2rem .4rem 2.4rem 0; scrollbar-width: thin; scrollbar-color: #2e4063 transparent; }
.ms-group { display: flex; align-items: center; gap: .7rem; margin: .7rem 0 .1rem; color: var(--mc); font: 800 .78rem var(--font-pixel-ui); letter-spacing: .06em; }
.ms-group::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--mc) 60%, transparent), transparent); }
.ms-group:first-child { margin-top: 0; }

.ms-row, .ms-banner { --mc: #38bdf8; position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: 3rem minmax(0, 1.1fr) 4rem minmax(0, 2fr) 8rem; align-items: center; gap: .9rem; padding: .55rem .9rem; border-radius: .8rem; border: 1px solid color-mix(in srgb, var(--mc) 35%, #0b1424); background: linear-gradient(90deg, color-mix(in srgb, var(--mc) 10%, #101b2e), #0e1829 70%); }
.ms-row > *, .ms-banner > * { position: relative; z-index: 2; }
.ms-ico { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .8rem; border: 1px solid color-mix(in srgb, var(--mc) 60%, #0b1424); color: var(--mc); background: color-mix(in srgb, var(--mc) 16%, #0b1424); box-shadow: 0 0 .9rem color-mix(in srgb, var(--mc) 28%, transparent); }
.ms-ico svg, .ms-ico img { width: 1.45rem; height: 1.45rem; }
.ms-main { display: grid; gap: .4rem; min-width: 0; }
.ms-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e8f5ff; font: 800 .8rem var(--font-clean, inherit); }
.ms-bar { height: .5rem; border-radius: .4rem; background: #060b14; border: 1px solid #1d2b45; overflow: hidden; }
.ms-bar i { display: block; height: 100%; border-radius: .4rem; background: linear-gradient(90deg, color-mix(in srgb, var(--mc) 70%, #000), var(--mc)); box-shadow: 0 0 .6rem var(--mc); transition: width .5s; }
.ms-pips { display: flex; gap: .3rem; }
.ms-pips i { flex: 1; height: .5rem; border-radius: .3rem; background: #060b14; border: 1px solid #1d2b45; } .ms-pips i.is-on { background: var(--mc); box-shadow: 0 0 .6rem var(--mc); }
.ms-count { color: #fff; font: 800 .9rem var(--font-pixel-ui); text-align: center; } .ms-count small { color: #6f84a3; font-size: .62rem; }
.ms-mini { grid-column: 4 / -1; color: #9fb3cf; font: 800 .62rem var(--font-pixel-ui); letter-spacing: .05em; text-align: right; }
.ms-rw { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; margin: 0; padding: 0; list-style: none; }
.ms-rw li { --c: #fbbf24; display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .5rem; border-radius: .5rem; border: 1px solid color-mix(in srgb, var(--c) 55%, #0b1424); background: color-mix(in srgb, var(--c) 14%, #0b1424); color: #f8fafc; font: 800 .62rem var(--font-clean, inherit); white-space: nowrap; }
.ms-coin { width: .7rem; height: .7rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff7cc, #fbbf24 55%, #b45309); box-shadow: 0 0 .4rem #fbbf24; }
.ms-btn { display: inline-grid; place-items: center; min-height: 2.1rem; padding: .3rem .5rem; border-radius: .6rem; border: 1px solid #334561; background: #0c1424; color: #64748b; font: 800 .6rem var(--font-pixel-ui); letter-spacing: .04em; text-align: center; }
button.ms-btn { cursor: pointer; border: 2px solid color-mix(in srgb, var(--mc) 70%, #fff); background: linear-gradient(180deg, color-mix(in srgb, var(--mc) 80%, #fff), color-mix(in srgb, var(--mc) 70%, #000)); color: #06121c; box-shadow: 0 .15rem 0 color-mix(in srgb, var(--mc) 40%, #000), 0 0 1rem color-mix(in srgb, var(--mc) 55%, transparent); transition: transform .12s, filter .12s; }
button.ms-btn:hover { transform: translateY(-1px); filter: brightness(1.1); }
.ms-btn.is-claimed { color: #4ade80; border-color: #1f5a3a; background: #0c1f19; }

.ms-row.is-ready { border-color: var(--mc); background: linear-gradient(90deg, color-mix(in srgb, var(--mc) 22%, #101b2e), #0e1829 75%); box-shadow: 0 0 1.4rem color-mix(in srgb, var(--mc) 35%, transparent); }
.ms-row.is-ready::before { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; z-index: 1; pointer-events: none; background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--mc) 35%, #ffffff00), transparent); transform: skewX(-18deg); animation: msRow 5s ease-in-out infinite; }
.ms-row.is-done { opacity: .55; filter: saturate(.55); }
.ms-chest { border-width: 2px; border-color: color-mix(in srgb, var(--mc) 70%, #0b1424); background: radial-gradient(ellipse at 0 50%, color-mix(in srgb, var(--mc) 24%, transparent), transparent 55%), linear-gradient(90deg, color-mix(in srgb, var(--mc) 12%, #101b2e), #0e1829); }
.ms-chest .ms-main strong { color: var(--mc); font: 800 .85rem var(--font-pixel-ui); letter-spacing: .05em; }
.ms-banner { grid-template-columns: 3rem minmax(0, 1fr) 6rem; border-width: 2px; border-color: color-mix(in srgb, var(--mc) 60%, #0b1424); box-shadow: 0 0 1.4rem color-mix(in srgb, var(--mc) 25%, transparent); }
.ms-banner .ms-main strong { color: var(--mc); font: 800 .85rem var(--font-pixel-ui); }
.ms-banner .ms-mini { grid-column: 1 / -1; text-align: left; }

.ms-toast { position: fixed; left: 50%; bottom: 5.4rem; z-index: 9999; transform: translateX(-50%); display: grid; gap: .4rem; justify-items: center; padding: .7rem 1.1rem; border-radius: .9rem; border: 2px solid #4ade80; background: linear-gradient(180deg, #123626, #0b1a14); box-shadow: 0 0 2rem #22c55e77; animation: msToast 3.2s ease both; }
.ms-toast strong { color: #86efac; font: 800 .7rem var(--font-pixel-ui); letter-spacing: .06em; } .ms-toast ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; margin: 0; padding: 0; list-style: none; max-width: 30rem; }
.ms-toast li { --c: #fbbf24; display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .55rem; border-radius: .5rem; border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 14%, #0b1424); color: #fff; font: 800 .66rem var(--font-clean, inherit); }

.tab-dot { position: absolute; top: -.35rem; right: -.3rem; min-width: 1rem; height: 1rem; padding: 0 .25rem; border-radius: 1rem; background: #f43f5e; color: #fff; font: 800 .55rem/1rem var(--font-clean, inherit); text-align: center; box-shadow: 0 0 .6rem #f43f5e; animation: msDot 1.6s ease-in-out infinite; }
.tab-dot[hidden] { display: none; }

@keyframes msShine { 0%, 50% { transform: translateX(-160%) skewX(-18deg); } 100% { transform: translateX(520%) skewX(-18deg); } }
@keyframes msRow { 0%, 55% { left: -40%; } 100% { left: 130%; } }
@keyframes msToast { 0% { opacity: 0; transform: translate(-50%, 1rem); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -.4rem); } }
@keyframes msDot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .ms-tab.is-on::after, .ms-row.is-ready::before, .tab-dot { animation: none; } }
html.pref-no-shine .ms-tab.is-on::after, html.pref-no-shine .ms-row.is-ready::before { animation: none !important; display: none !important; }
@media (max-width: 800px) {
  .ms-hub { height: auto; padding: 0 .6rem 1rem; } .ms-head { flex-wrap: wrap; } .ms-tabs { flex-wrap: wrap; } .ms-tab { min-width: 0; flex: 1; } .ms-all { margin-left: 0; width: 100%; }
  .ms-row { grid-template-columns: 2.6rem minmax(0, 1fr) auto; } .ms-rw { grid-column: 1 / -1; justify-content: flex-start; } .ms-btn { grid-column: 1 / -1; }
}